ال ب أ باءالمواقع الإلكتروني ذات الطابع الديناميكى 
مع الترکیزعلى بناء موقع الکترونى لمؤسسة تعليميت بلغت ٠۸8۴‏ 

اا أحمد فهمى عبد المنعم عميرة 

ٿ :°1۳ sEVTVITA17 — *\(TAETEATOY‏ 
الطب .ر | | الأولى عام ۱م 
رقمالإيداع | | 7/1016 
تش واا | | وڪ وت a‏ 
س مڪكتب) حسونم 


لا يجوز نسخ أو استعمال أى جزء من أجزاء هذا الكتاب بأى شكل من 
الأشكال أو بأية وسيلة من الوسائل » ( المعروفة منها حتى الآن أو ما يستجد 


مستقبلاً ) » سواء بالتصوير أو بال لسجيا على أشرطة أو أقراص أو حفظ 
المعلومات واسترجاعها » دون إذن کتايى من المؤلف . 


أحمد فنهمى عمبرة 


البرامج الستکرمۃ فی مشو الکناں 


. Front Page xp niq ° 

. Access Xp ali ° 

. Photo shop 7 ME ali ° 

. Easy Button & Menu Maker ali ° 


۰ برنامج ۴۲۲ . 


مهم 


اسماء البرامج المذكورة فى هذا الكتاب وغيرها من علامات تجارية مسجلة لأصحاما 


والمؤلف يحترم هذه العلامات ويقر ها لمالكيها سواء کانوا أفراداً أم ش ركات . 


الملفات الخاصة بالمشروع الذی تم شرحه بالکتاب و جميع البرامج المستخدمة 


ستجدها ياسطوانة مدمجة مرفقة مع الكتاب . 


الوت سيوع الصفحة 
الاإاملاء O_O TT‏ 
المقدمة MM lM‏ 
٠‏ الفصل الأول: —ooewcoRS ND‏ 


مفاهيم بحعض تقنيات الويب ومصطاحاتها 


hk. RRS ARRAS : الفصل الثانى‎ ٠ 
Front Page تصميم صفحات الموقع بہرنامج‎ 


u. a : الفصل الثالت‎ ٠ 
A5۲ تثبيت خادم 115 لمعاینت صفحات‎ 


ه الفصل الرابع : CT‏ 
إذشاء قاعدة بيانات ۸٥-655‏ وإذشاء صفحات 9 
إضافت البيانات 

Mi. . NRA De الفصل الخامس:‎ ٠ 


إنشاء البحث المتقدم و صفحات عرض البيانات 


ee : الفصل السادس‎ ٠ 


إنشاء صفحات تعديل البيانات وحذفها وطباعتها 4 
٠‏ الفصل السابع : TS‏ 
انت قحان الصو ادنڪ رون 
٠‏ الفصل الثامن: a.‏ 
إنشاء صفحات إدارة النظام 
© الفصل الناسح : WW RRR‏ 
إذشاء صفحات البحث الخاصت بالطلاب 
٠‏ الفصل العاشر : E‏ 

۲٦ 
خخ راتاق ماف ونل اغات غ حن‎ 
۴۲٣ برنامج‎ 

0۲ 


RSS : امراج‎ 


با لفو افع ال الك وة دات الطاب الدينافيكى 


الا,ٍ هراو 


إلى روح والدی مربی الأجیال ومعلمها ره الله تعالی وأسکنه فسیح جناته 
فرغم رحيله مازلت أتعلم منه . إلى والدتىجندية التربية والتعليم › 
مهندسة العقول » صانعة الوجدان . إلى أشقائى وأصدقائى» إلى شهداء ثورة 
٠٥‏ يناير بجمهورية مصر العربية و إلى كل مواطن عربى مهما اختلف لونه 


أو جنسه أو ديانته . 


NNN 


ا ااك فة 6 ف اة اتناك 


کے ا 
مھ م 


الحمد لله تعالى الذى بنعمته تتم الصالحات » والصلاة والسلام على 
سیدنا محمد صلی الله عليه وسلم وعلى آله الطيبين وأصحابه الكرام 
والتابعين له بإحسان إلى يوم الدين » أما بعد : 

يشير رصد ملامح الواقع ودراسته وتحليله وإستشراف آفاق المستقبل ؛ 
لا اتد فی المرر اد کن ن مرت ار کر ار 
لذلك فقد حاولت جاهداً أن أقدم المساعدة للمبتدئين فى مجال تصميم المواقع 
وبرمجتها من خلال هذا الكتاب حيث يحتوى هذا الكتاب على مجموعة من 
التطبيقات التى تشرح فكرة بناء المواقع الإلكترونية ذات الطابع الديناميكى 
للمبتدئين » كما سيتم تطبيق فكرة بناء المواقع الديناميكية عن طريق إنشاء 
موقع إلكترونى ديناميكى لمؤسسة تعليمية » وسوف يتعرض هذا الكتاب إلى 
شرح مبسط لطريقة تصميم الموقع وبرمجته بلغة (۸58۳) وأحب أن أنوه لك 
عزيزى القارىء بأن هذا الكتاب لم يهدف إلى التعمق فى عالم التصميم 
والبرمجة » وإنما يضعك على أول درجات السّلم فمن المؤكد أنك تعرف أن 
من يصل إلى أول درجات السلم فقد عرف من أين يستكمل باقى درجاته › 
اک کک ا ت هر وا كلك ادف 
كا كاعد تفلم فن ها النطال من كال الإضافة إل اللو ات 
E E aS a ak Da‏ 
الا ا اط ا مو اد وار کت ادن 
هذه المعلومات فمن المؤكد أنك ستسهم فى إضافة فكز جديد تخدم بها نفك 
وغيرك فی آن واحد . 


ناء الفو اف الك وة دات الطان الدينافيكى 


لذلك لابد عزيزى القارىء من أن تتسلسل فى قراءة هذا الكتاب وتنفيذ 
كافة التطبيقات والخطوات الواردة به ؛ للوصول إلى الهدف المنشود 
فهو يأتى حاملاً بين طياته عشرة فصول » حيث يتناول الفصل الأول مفاهيم 
بعض تقنيات الويب ومصطلحاتها › ويتعرض الفصل الثانى للبدء فى 
تصميم الموقع بأحد برامج التصميم ›» ويعرض الفصل الثالث طريقة تذبيت 
الخادم 115 لمعاينة صفحات ۸68۲ » ويتعرض الفصل الرابع إلى طريقة 
إنشاء قاعدة بيانات داخل برنامج ووع٥٥۸‏ وكذلك إنشاء الصفحات 
الديناميكية التى يتم من خلالها إضافة البيانات » ويتحدث الفصل الخامس عن 
إنشاء بحث متقدم وأيضا إنشاء صفحات عرض محتويات قاعدة البيانات › 
ويتعرض الفصل السادس إلى طريقة تصميم وكتابة أكواد صفحات تعديل 
وحذف وطباعة محتويات قاعدة البيانات » ويتعرض الفصل السابع إلى 
طريقة تصميم صفحات التصويت الإلكترونى وبرمجتها » ويتعرض الفصل 
الثامن إلى طريقة إنشاء صفحات إدارة النظام » ويتعرض الفصل التاسع إلى 
تصميم وكتابة كود صفحات البحث » وأخيراً الفصل العاشر الذى يتعرض 
إلى حجز استضافة مجانية والتعامل مع برنامج ۳1۲ لنقل ملفات المواقع . 

هذا ومن فضل الله على أن هدانى للخير › فإن كنت قد أحسنت فى 
بعض الأمر فهذا فضل الله يؤتيه من يشاء › وإن كنت الأخرى فحسبى أنه 
عن قصد ما كان » فلا أدعى لهذا الكتاب كمال » فالنقص من سمات البشر »› 
والکمال لله تعالی وحده . 


املف 
أحمد فهمى عبد المنحم عميبرة 
منية المرشد ۔ مطوبس ۔ كفر الشيخ 
دیسم بر ۲۰۱۱ 


النصل الأول 
مفاهيہ بض نفنيان الويب 
ومصطلحانیا 


بنا الفة افع ال الك وة دات الطان الديافيكى 


الفصل الأفل 
مفاهيم بعص تقنيات الويب ومصطاحانها 


تمه دد: 

منذ أن انتشر الإنترنت بصورة واسعة فى العالم أصبحنا فى حاجة إلى 
تعظيم الاستفادة من الإنترنت من وجهتى النظر الخدمية والتجارية فعلى المستوى 
الخدمى توجهنا إلى تقديم الكثير من الخدمات الإلكترونية فى شتى مجالات الحياة 
> ومن المسلم به فى عالم الأعمال أنه كلما ازداد إحتياجنا لخدمة معينة فى مجال 
ما ازداد حجم التعاملات التجارية فى هذا المجال » ومن هذا المنطلق أصبح هذا 
التوجه بمثابة ضوء أخضر للشركات الكبرى للبدء فى ابتكار تقنيات تساعد على 
تقديم الخدمات المطلوبة بصورة جيدة مما أدى إلى ازدياد حدة التنافس بين 
الشركات لإنشاء برامج اتصميم المواقع » وعلى رأسها شركة مايكروسوفت ولقد 
أدى هذا التنافس إلى تعظيم الإستفادة على المستوى التجارى وكل ذلك نتج عنه 
تعدد لغات البرمجة وبرامج تصميم المواقع حتى أصبحت هذه اللغات تشغل بال 
المهتمين بالتطور التكنولوجى › فكثيراً ما نتجاذب أطرف الحديث مع الأصدقاء 
عن لغات البرمجة وبرامج تصميم المواقع وتتنائثر العديد من المفاهيم 
والمصطلحات ونحن غير مدركين لمعانيها › أو مستوعبين لمدى حجمها أو 
مستواها » فعلى ضفاف صفحات هذا الفصل سوف نتعرف سوياً على بعض هذه 
اللغات وكذلك المصطلحات والمفاهيم الخاصة بعالم التصميم وبرمجة الويب . 
أولاً : الفرق بين الموقع الديناميكى و الموقع الإستاتيكى : 

الموقع الديناميكى : هو الموقع التفاعلى أى الموقع الغير الثابت حيث 
يرتبط هذا الموقع بقاعدة بيانات فيتم عمل إفراغ وتجديد لمحتويات هذه 
القاعدة فيتغير محتوى الموقع بتغير محتويات قاعدة البيانات . فعلى سبيل 
المتال لا الحصر مواقع الأخبار فهذه المواقع تعد أفضل متال للمواقع 


بناء المواقع الإلكت ونية ذات الطابع الديناميكى 

الديناميكية ؛ لأن طبيعة مواقع الأخبار التغيير المستمر حيث يتم إضافة 
الأخبار داخل قاعدة البيانات وذلك عن طريق صفحات تم برمجتها وعمل 
اتصال بينها وبين قاعدة البيانات وتعرف هذه الصفحات بالصفحات 
الديناميكية وكذلك يتم حذف الأخبار الموجودة بقاعدة البيانات والتعديل 
فى محتويات قاعدة البيانات عن طريق هذه الصفحات وبذلك أصبح بإمكان 
مالك الموقع إدارة موقعه وتغيير محتواه دون أن يحتاج إلى شخص 
متخصص فى تصميم المواقع . 

الموقع الإستاتيكى : هو الموقع ثابت المحتوى أى غير تفاعلى . فعلى 
سبيل المثال لا الحصر لو افترضنا جدلا أنك تريد عمل موقع تكتب بداخله 
السيرة الذاتية الخاصة بك فمن المؤكد أن صفحات الموقع الخاصة بسيرتك 
الذاتية تحتوى على تاريخ ميلادك ومحل ميلادك وغيره من البيانات الثابتة 
التى لا تستدعى تغييرها باستمرار أى محتويات ثابتة إذا فهذا النوع 
من المواقع هو المواقع الإستاتيكية . 

إن الاختلاف الرئيسى بين النوعين يتركز فى طريقة عرض البيانات 
ففى حالة المواقع الإستاتيكية (الثابتة) يتم عرض البيانات كما هى مخزنة فى 
قاعدة البيانات أو لا يتم استخدام قاعدة بيانات من الأساس أى يتم إنشاء 
صفحات الموقع عن طريق لغة 11[ . أما المواقع الديناميكية (الغير 
ثابتة) يتم تغيير محتويات قواعد البيانات المرتبطة بها وعمل لوحات تحكم 
لإدارة محتوى قاعدة البيانات أى إدارة محتوى الموقع . 


ثانيا : نظرة على أبرز لغات برمجة الويب [ تقنيات الويب]: 

تنقسم لغات برمجة الويب إلى قسمين + هما (Client Side)‏ 
و (# S1‏ إمvامS)‏ القسم الأول يعرف بلغة البرمجة من جهة العميل أى 
اللغات التى تتعامل مع متصفح الإنترنت ولاتحتاج إلى خادم أو استضافة أى 
يمكن كتابتها واختبارها على أى جهاز . أما القسم الثانى يعرف بلغة البرمجة 
التی تتعامل مع الخادم أی تحتاج إلى استضافة متل لغتی ASP‏ و PHP‏ 


1۰ 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 
ولاختبار الصفحات المكتوبة بهذه اللغات لابد من تحويل الجهاز إلى خادم 
وسوف نتطرق إلى طريقة تحويل الجهاز إلى خادم لاحقا » ويوجد العديد 
من لغات برمجة الويب وسوف نستخلص نبذة عن أهم اللغات فيما يلى : 
\. lغ“ Hyper Text Mark up Language ) HTML‏ (: 
تعرف هذه اللغة بالعربية أنها (لغة ترميز النص التشعبية) 
حيث من خلال هذه اللغة تستطيع كتابة النصوص وإنشاء القوائم والجداول 
والإطارات وإدراج الصور وغير ذلك من العمليات البسيطة . 
فلابد أن تعرف عزيزى القارىء أن هذه اللغة لا يمكنك الاستفادة منها بأكثر 
من ذلك ؛ حيث إن هذه اللغة لا يمكن الاعتماد عليها فى إنشاء الصفحات 
الديناميكية وأيضا لا يمكنك التعامل مع قواعد البيانات من خلال هذه اللغة 
ولكن يمكنك من خلالها إنشاء صفحات بسيطة مكونة من نصوص وصور 
وقوائم لا أكثر من ذلك » ولكن هذه اللغة ضرورية فلا يخلو موقع من 
الصور أو النصوص فلابد أن تعرف جيداً أن هذه اللغة متداخلة مع كافة 
اللغات الأخرى فهى أساس دخولك إلى عالم الويب . 


". غ( Active Server Pages ) ASP‏ (: 
تعرف هذه اللغة بالعربية أنها لغة (صفحات الخادم النشط) › إن هذه 
اللغة تعد من اللغات الأكثر انتشارا وتتميز هذه اللغة بأن أكوادها سرية حيث 
لا يمكن لأى شخص رؤية الأكواد التى قمت بكتابتها عن طريق عرض 
مصدر الصفحة حيث إن أكواد هذه اللغة تكون مشفرة فلا يمكن لأحد رؤية 
الكود ولا الاطلاع عليه وهذه اللغة عبارة عن تقنية تم تطويرها بواسطة 
مايكروسوفت ليتم استخدامها في إنشاء صفحات ويب قوية وديناميكية 
ولإنشاء برامج ويب متقدمة » وهى تعد من لغات البرمجة التي تنفذ من 
جانب المزود (الخادم) أي أن معالجة الأوامر المكتوبة بهذه اللغة تتم على 
مزود الويب وليس على جهاز المستخدم كما هو الحال مع أوامر HTML‏ › 
وحتى تتم هذه المعالجة فإنه يتم تثبيت مكتبات ربط ديناميكية أو ما يسمى 


ا اف ا ا فة 6 فاا اتناك 
ب Dynamic Link Library DLL‏ على مزود الویب› وعندما يطلب 
المخد ضفحة ريت فان الخافة فخض السفخة رى إن كانت ال فة 
هى صفحة مزود نشط أم لا فإن كانت كذلك» فإنه يقوم بمعالجة مكتبة الربط 
الديناميكية 511 على الخادم ثم يرسل نتيجة هذه المعالجة كصفحة 
ا[ لعرضها في متصفح الويب على جهاز المستخدم. وهذا يتيح 
عرض صفحات المزود النشط على جميع متصفحات الويب . وإن أحد أهم 
فوائد صفحات المزود النشط هي قدرتها على استرجاع البيانات من جميع 
أنواع قواعد البيانات ڊوl«ء‏ كlنٽ (Access , SQL server ,Oracle)‏ 
وغيره . وسوف تتركز دراستنا فى الفصول القادمة على هذه اللغة , 
. lک ASP.NET‏ : 


أيضا تسمى (+۸8۲) وهى الجيل الجديد من لغة مايكروسوفت 
الشهیرة ۸8۶ وتم إصدار هذا الجیل فی عام ۲۰۰۲م ولغتی ۸8۲ 
و NE1‏ .6۴ تمکنان مطوري مواقع الویب من تصمیم صفحات ویب 
ديناميكية وكذلك تطوير ها ولکj‏ تختفف ASP jع ASP . NET‏ 
فى النقاط التالية : 
) تدعم الشفرات المكتوية بلغات أخرى مثل : 

VB, Cr+, C# and Perl. 

) تسمح بخاصية ۷۲591۷۲6 في تحرير الصفحات ؛حيث يتم 
فصل الكود البرمجي عن المحتوى . 

. غ Hyper Text Processed ) PHPÉF‏ ( : 
تعد هذه اللغة من آكثر اللغات انتشارا بين المبرمجين منذ أن تم 
تطويرها عام ٤۱۹۹م‏ حيث كانت هذه اللغة بسيطة جداً فكان يمكنك من 
خلالها عمل سجل لزوار موقعك وعداد لزوار موقعك وبعض العناصر 
الأخرى البسيطة ولكن تطورت هذه اللغة إلى أن أصبحت تدعم قواعد 
البيانات وكان الإصدار الناتج عن عملية التطویر یعرف ڊ Open Source‏ 


۱۲ 


بنا لفو افع آل الك وة دات الطاب الديتافيكى 


أى الكود الذى يمكن لأى مستخدم الإضافة والتطوير فيه » وهكذا بدا 
المطورون بالإضافة والتطوير إلى أن أصبحت من أكثر اللغات انتشارا فهى 
تشبه لغة ۸8۴ من حيث مخرجاتها النهائية فهى أيضا تتعامل مع قواعد 
البيانات ويمكنك من خلالها عمل موقع دينامیكى كامل كما أن أكواد هذه 
اللغة سرية كما هو الحال فى لغة ۸6۲ . 


0. لغ Cascading Style Sheets ) CSS‏ (: 
تعرف هذه اللغة بالعربية أنها لغة (الصفحات المتراصة) فهذه اللغة 
تحدد كيفية عرض البيانات فى صفحة 1۷1[ فعند استخدام هذه اللغة يتم 
الفصل بين أكواد البيانات وأكواد مظهر البيانات مثل حجم الخط واللون 
وهكذا فإذا أردت التعديل فى شكل صفحات الويب ومظهرها وذلك بدون 
التعديل فى بيانات هذه الصفحات فسوف يتم فتح الملف الخاص ب °88 
والذى يتم إنشائه عن طريق هذه اللغة ومن خلال الأكواد المكتوبة بالملف 
يتم التعديل على شكل صفحات الويب حيث إن ملفات C88‏ يتم تسجيل 

جميع خصائص التنسيق والإخراج لصفحات الويب بداخلها . 


VB Script (—ël .1‏ : 
هى لغة إسكربت نصية تعمل فى بيئة الإنترنت وتتشابه فى مفاهيمها 
مع لغة اوج8 1عuو]۷‏ مع بعض التعديلات التى تلائم طبيعتها المتعاملة 
مع الإنترنت وهذه اللغة تتكامل بشكل جيد مع لغة ۸8۶ فمن خلال هذه 
اللغة يمكنك تحميل البرمجيات الإضافية للإنترنت وتشغيلها مثل ×مA)!۷‏ 
Document‏ حیث تعد وسیط بینھا وبین مستندات ۸68P & H1 M1‏ فمن 

خلال هذه اللغة يمكنك إضافة بعض الحركة على الصفحة . 
Java Script él .‏ : 

تمكنك هذه اللغة من إضافة الديناميكية على الصفحات بأشياء تتفاعل 
مع زائر الموقع وتتوقف على إجابة الزائر ورد فعله مثل تغيير التاريخ 
والوقت في الصفحة اعتماداً على معطيات الجهاز»ء وتنفيذ بعض الأوامر 


1۳ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
عند النقر على زر ماأو عند مرور المؤشر على صورة ما أو عند فتح 
الصفحة وإغلاقها أو ظهور نافذة عائمة أو منبثقة wملداس‏ مام هم تحمل 
ارتباط لصفحة أخرى أو غير ذلك. 


۸. لغ (Java Server Pages ) JSP‏ : 
تعرف هذه اللغة بالعربية أنها لغة (صفحات خادم جافا) وتم تسميتها 
بذلك لأنها لغة من لغات الجافا وتتعامل هذه اللغة مع قواعد بيانات الأوراكل 
بشکل رئیسی » وهی تتعامل مع ا Ny8@‏ ولکن معظم مواقع 9۲[ تتعامل 
مع قواعد البيانات أوراكل وهذه اللغة تعد من عائلة الجافا فبما أنها من عائلة 
الجافا فإنها تتمتع باندماج سهل مع لغة الجافا سكريب والتى هى خاصة 
بالمستخدم Sie‏ †ienاC‏ أما [JSP‏ هى Server Side‏ وهناك الکثير من 
المواقع التي بدأت تستخدم هذه اللغة في برمجتها مما يعني أنها بدأت فى 

دخول سوق البرمجة بشكل قوى . 


(Cold Fusion Markup ) CFM Fë ۸4‏ : 
هى عبارة عن لغة من ضمن عائلة برامج ماكروميديا وأصدرت هذه 
اللغة فى عام ١١٠۲م‏ وهذه اللغة تعتمد على الاتصال مع قواعد البيانات 
لخلق مواقع إنترنت ديناميكية» وتعتمد بشكل رئيسي على قواعد البيانات 
أوراكل و "S۹1‏ ولغة كولد فيوجن بما أنها من شركة ماكروميديا فهى 
تتعامل بشكل جيد مع الفلاش وتسمح لمطورى الفلاش بكتابة «0ناA‏ 
ام يخوله الاتصال بقواعد البيانات لسحب البيانات والمواقع المصممة 
باستخدام هذه اللغة قليلة مقارنة ب ۸58۶۴ و ۴۳1۲ اللتان مازالتا مسیطرتان 
کن نوف 
ثالثا : نبذة عن برامج تصميم المواقع : 
بوخ العفة ن اثر ام الم تخت هة فى تمه الو اقم دتا إن ده 

البرامج تعد وسيطا بينك وبين لغات البرمجة فعند قيامك بإدراج صورة 
باستخدام أحة آدرات الي رامح المخضة بتصمي المواقع فإن هذه الب ر امج تقوم 


1٤ 


ناء الفو افع الك وة ذاة الطاب الذيتافيكى 


بكتابة كود 111[ الذى يُمكن المتصفح من عرض هذه الصورة بطريقة 
E AR‏ ر ار ا 
بداخلها ومن خلال هذه البرامج يمكنك برمجة ورؤية تصميم الموقع فى آن 
واحد ومن أمثلة هذه lلبرal Front Page , Dream Weaver, Web‏ 
Expression‏ ويمكنك أيضاً الاستغناء عن هده البرامج وذلك عن طریق 
كتابة كود موقعك داخل برنامج ل۴۵ عه" الموجود بالويندوز ولكن ذلك 
أمر به صعوبة . 
EEE E E‏ 
ڊرaliچ Front Page‏ . 


رابعا : قواعد البیانات 8B ¡se‏ ه†ه0 : 


لقد ذکرنا سابقا أن لغتی ۲۲81۲ & ۸8۲P‏ یدعمان قواعد البیانات ولکن 
السؤال الذى يطرح نفسه ما أنواع قواعد البيانات التى يدعمها كلا منهما ؟ 
الإجابة على هذا السؤال أن كلاهما يدعمان قواعد اليبانات من أنواع 
Access , SQL server , MYSQL & Oracle‏ حیث یمکنك من 
خلالھما ربط قواعد بیانات MY SQL gyİ SQL server gÎ Access‏ Îو‏ 
ماOrac‏ ولا بد أن تدرك جیداً أن قواعد البيانات من نوع ووعع۸ تعد 
ضعيفة إذا تم مقارنتها بالأنواع السابقة فالحد الأقصى لمساحة قاعدة 
البيانات ووعمء۸ هو ۲جيجا بايت ولكن لا يمكننا القول بأن قواعد البيانات 
من نوع ٠ووة6٥۸‏ ضنعيفة , فغلى سبيل المثال لا الخصر لو أنك قت 
بإنشاء موقع لمدرسة أو موقع إخبارى بسيط فيمكنك الاعتماد على قواعد 
بيانات من نوع 4ء8٥٥۸‏ ولكن لو أنك تقوم بإنشاء موقع لوزارة التربية 
والتعليم فمن الطبيعى أن هذا الموقع سيكون عليه بيانات جميع الطلاب 
المتواجدين فى جميع المراحل الدراسية ففى هذه الحالة لابد من استخدام 
قواعد بيانات MY SQ@1_‏ أو Server‏ اSQ‏ أو eاOrac‏ ؛ لأنهما الأقوى 
ولكن الفرق بينهما فى السعر فالنوع الأول مجانى أما النوع الثانى فهو غير 
مجانى أما النوع لثالث أيضا غير مجانى ولكن لا يتم استخدامه إلا فى 


1۵ 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 
المشروعات الكبرى . ومن الجدير بالذكر أن الشائع بين المبرمجين هو 
استخدام قواعد البيانات N۷ SQ]‏ عند البرمجة بلغة ۴1۲ و استخدام 
قواعد البيانات من نوعى sوعءA۸‏ و SQ[ S۷6۲‏ عند البرمجة بلغة 
$8۴ لأنهما من إنتاج شركة مايكروسوفت ويتفاعلان بشكل جيد مع هذه 
اللغة التى هى أيضا من إنتاج مايكروسوفت وسوف ترتكز دراستنا فى 
الفصول القادمة على استخدام قواعد البيانات من نوع Access‏ . 
خامسا : أنظمة تشغيل لغات البرهجة : 
من الجدير بالذكر أن الاستضافات لها أنظمة مختلفة تقوم بدعمها فهناك 
استضافات تدعم أنظمة مثل نمل , inu×‏ , dowsمW‏ ولکن لکل 
SP.net‏ يعملان مع نظام s‏ س0ل W1‏ ولغة ۴H۲‏ تعمل مع أنظمة 
×ام1[ ويمكنك استخدامها على أنظمة أخرى . 
سادسا : اصتداد لغة البرصمجة : 
عند دخولك على أى موقع على شبكة الإنترنت يمكنك معرفة لغة 
البرمجة التى تم استخدامها فى بناء الموقع وذلك من خلال النظر إلى شريط 
Address Br‏ حیث تجد امتداد الموقع مکتوب کما بالشکل التالی : 
http://www.yoursite.com/ page‏ 
فى الشكل السابق يتجه رأس السهم إلى امتداد الصفحة حيث نجد أن 
الموقع تم برمجته بلغة ۸8۲ . 
http://www.yoursite.com/ page| .aspx (xe‏ 
فى الشكل السابق يتجه رأس السهم إلى امتداد الصفحة حيث نجد أن 
الموقع تم برمجته بلغة tمہ.۴‏ ۸8 حیث إن لغة ۸P .N٤1‏ تأخذ امتداد 
aSPpX‏ . 


النفصل الانى 
تصميء صفحات الوقع 


Front Page lû) 


ا ااك فة 6 ف اة اتناك 


الفصل الثانش 
تصميم صفحات الموقع ڊıرaliج Front Page‏ 


فى هذا الفصل سنقوم بالبدء فى تصميم موقع بسيط لمدرسة ليكون 
مثالا على بناء موقع دینامیکی یمکن أن نحتذی به فى بناء موقع آخر يعتمد 
على مشروع مختلف وهذا لا يمنع أن الموقع يوجد به صفحات غير 
ديناميكية فسوف نبيدا بتصميم الصفحات التى تأخذ الطابع الإستاتيكى أى 
الصفحات تابتة المحتوى ثم سنقوم لاحقاً بتصميم الصفحات ذات الطابع 
الديناميكى . 

و فی ا ا ف ا ا 
مەطء t0دط۴‏ لتقطيع واجهة الموقع ثم سنقوم بالانتقال إلى برنامج 
۴0n Page‏ لتصميم صفحات الموقع ثم سننتقل إلى برنامج 

Easy Button & menu maker‏ لتصميم القوائم الجانبية الخاصة 

بصفحات الموقع . 
أولاً : تجهيز واأجهة الموقع داخل برناصج Photo shop‏ : 

لاشك أن أغلبية مصممى المواقع يستخدمون البرنامج الشهير 
Shp‏ 0t0ط۴‏ فى تصميم واجهة الموقع فلو أنك قمت بتصميم واجهة 
الموقع على برنامج 0pط؟‏ 00ط فهل سألت نفسك كيف سيتم نقلها 
إلى برنامج معه۴ إ۴ ؟ أو لو أنك تريد إدخال صورة معينة 
لاستخدامها كواجهة للموقع فهل سألت نفسك كيف يمكنك نقلها إلى برنامج 
Front Page‏ ؟ 


اذا قمت عزيزى القارىء بفتح برنامج shop‏ 06 وفتحت 
الصورة المراد جعلها واجهة للموقع أو قمت أنت بتصميم واجهة بالبرنامج 


فا آلف اف الك وة اة الشاة الدرناسضى 
فإنك بحاجة إلى إجراء عملية تقطيع لتصميم الواجهة أولا قبل نقله إلى 
برنامج ع۴۵ ۴۲٥٣۲‏ » وعملية تقطيع التصميم ذات أهمية كبرى حيث إنها 
تجعل واجهة الموقع تتمدد وتتناسب مع عرض الشاشة التى سيتم فتح موقعك 
ھا کر آن مر قق نمع قفا لی فاشك مکانة دی عرض وسن 
ذلك تابع معى الشكل التالى : 


Ele Edit layer select Filler ew Window Help 


EZ 


Sees From Guides! 


SFR RDI 
LER ES 


Color St 


2 


من الشكل السابق يلاحظ أنه عبارة عن تصميم مقترح لواجهة الموقع 
التى سوف نستخدمها فى تصميم الموقع ومقاس هذه الواجهة 979× 156 
بكسل وهذا المقاس ليس ثابتاً حيث يمكنك تغيير المقاس حسب رغبتك وسوف 
نقوم الأن بتقطيع واجهة الموقع عن طريق آداة 1اهه 1 S11‏ الموجودة 
بالبرنامج وهذه الآداة ستجدها بشريط أدوات البرنامج كما بالشكل التالى : 


WH ace Select Teel E‏ کے ی 
EE‏ 


من خلال شريط الأدوات الموضح بالشكل السابق والموجود داخل 
البرنامج قم باختيار الأداة » ثم قم بالذهاب إلى التصميم وقسمه إلى ثلاثة 
شرائح أفقيا أو رأسيا عن طريق الضغط والسحب بالأداة ليصبح التصميم 
كما بالشکل التالی : 


فا الفواقع الك وة دات ا الديناميكي 


الرس الحديده الس م 


اط من اگل اسای ا کے قط ااا ج إئے قات قرات افا 
فإذا قمت بتقطيعها كما بالشكل السابق تكون قد انتهيت من عملية تقطيع 
الواجهة . 
وحتى يتم تحويلها إلى برنامج eعه۴ ۴۲٠٣۲‏ قم بالتوجه إلى قائمة 
٥ا۴‏ تم اختر الأمر Save ۴٥۲ ۷e‏ ستظھرنافذة کما بالشکل التالی : 


Esko: 


د ا را ارو کد 


[HTML and Images [*.htrnl] 


[Default Settings 
(Al Slices 


۲۰ 


بنا الفواقع آ[الكم وه ة دات الظا الدينامیكی 


قم باختيار المكان المراد حفظ المشروع به ثم قم بتسميته بالاسم مہ1 
وذلك لأن الصفحة الرئيسية لأى موقع يكون اسمها ×ملم] ثم قم بالضغط 
علی زر Save‏ . 
بعد قيامك بالخطوات السابقة تكون قد انتهيت من تقطيع الواجهة 
EE SE a EL ES,‏ 
الملفات به ستجد الملفات بداخله كما بالشكل التالى : 


e ا‎ Û index 
images ټ‎ Firefox Docurnent 
1 EB 


ويلاحظ فى الشكل السابق وجود صفحة ×ملم] ٠‏ والمجلد ومعٍهص! 
حيث يحتوى المجلد ومعه.] على شرائح التصميم الذى تم تفطيعه ويمكنك 
فتح المجلد لرؤية شرائح التصميم › آما إذا قمت بفتح صفحة ×٥لم]‏ ستظهر 
واجهة الوقع بداخل الصفحة كما بالشكل التالى : 


J header - Mozilla Firefox 
File Edt Wiew History E 


Wen History Eookmaks Tools Hep 
9€ fi Û FlerlifD:Praject Bookfindex html e-1 


مدرسة 


ااا سد الجدناه السمبد ارد 


ولكنها ليست بالتنسيق المرغوب فيه وسوف نقوم بتنسيق واجهة 
الموقع وبنائه داخل برنامج ٥ع۴۵ ۴۲٥٣٤‏ وبذلك یکون قد انتھی 
دور برنامج Photo Shop‏ . 


۲١ 


نا افوا الك وة ذاق الطات الدرافيكن 
ثانياً: بينة برنامج Fron) P4g¢‏ : 


بعد تحميل برنامج معه۴ ٤ر۴۲‏ وفتحه تظهر واجهة البرنامج 
كما بالشكل التالى ٠‏ 


Type a question forhep 


Mews 


Navigation 


ويلاحظ من الشكل السابق أن جميع أشرطة أدوات البرنامج غير 
نشطة أى أنه لا يمكن استخدامها إلا إذا تم فتح صفحة جديدة ويمكنك فتح 
صفحة جديدة عن طريق قائمة ۴18 ثم اختيار الأمر سه" وبعدها ستظهر 
واجهة البرنامج كما بالشكل التالى : 


سا 
ê Bol |0.‏ 
Tes New Roman dand <| B 7 u¥+|KAlEEEFEIM. 2-A.‏ 
ESLE TLIEPIERLIED Jl Bm.‏ 

Views new_page_Z.htm x 
Page 
e 
reports 
a 
م‎ 
Hrperlinks 
a 

Rema] Bum review |< | و‎ 


۲ 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 
ويلاحظ من الشكل السابق أن البرنامج قام بفتح صفحة بيضاء فهذه 
الصفحة هى صفحة العمل التى سيتم التعامل معها . 
فإذا نظرنا إلى الجزء العلوى من واجهة البرنامج سنجد أنه يتكون من 
شریط القوائم 811 Mu‏ وبعض أشرطة الأدوات التى سنتعرض لها أثناء 


التصميم بالتفصيل أما إذا نظرنا إلى الجزء الأسفل من واجهة البرنامج 
سنجدها كما بالشكل التالى : 


|KANorrmal | E HTML Preview 


ويتضح لنا من الشكل السابق أن الجزء الأسفل يتكون من ثلاثة 
أوضاع کا 

ه الوضع 1ه"٣۲إه.N‏ : وهو وضع خاص بعرض تصميم الصفحة حيث 
يتم اختيار هذا الوضع للعمل بالصفحة من خلال أدوات البرنامج . 

٠‏ الوضع 11۷11 : وهذا الوضع مهم جداً حيث تظهر به الأكواد 
الخاصة بالصفحة التى يتم العمل بها وسوف يتم كتابة الأكواد الخاصة 
بلغة A8۲‏ به 

٠ه‏ الوضع رم۴ : وهو وضع المعاينة حيث يمكنك معاينة الصفحة 
المكتوبة بكود 11[ من خلاله ولكنه لا يصلح لمعاينة الصفحات 
الديناميكية لأنها كما ذكرنا مسبقا تحتاج لتثبيت خادم على الجهاز لمعاينتها . 

مما سبق نكون قد أخذنا نظرة إلى بيئة برنامج ع۴۵ ۴۲٥٥٤‏ والآن 

سنبداً فی تصميم صفحات موقعنا . 


۲ 


ا اا ااك فة 6 ف اة الاك 


ثالثاً: تخطيط صفحات الموقع داخل برناصج Fron) ۴P4g٤‏ 
وتنسيقها وتقسيمها: 


يجب أن تعرف عزيزى القارىء أن الموقع يتم تقسيمه إلى جداول 
ولكن حدود هذه الجداول تكون وهمية حيث تكون بمثابة دليل للمصمم 
لمعرفة حدود التصميم وحدود الصفحة › وعملية التقسيم تعتمد بصفة أساسية 
على طبيعة الموقع وشكل الموقع ومن وجهة نظرى الشخصية أرى أنه يجب 
على المصمم رسم الموقع على ورقة بيضاء خارجية أى تخطيط الموقع 
EE E EA Gg E E E E‏ 
بتصميمه سويا على ورقة بيضاء أخذت الشكل التالى : 


۱ لوف 
الصفحة الرئيسية | إدارة النظام | صورالمدرسم| استطلاعات | سجل الزوار | اتصل بنا 


أبواب الموقع 
المدرست فى سطور 
السياق المؤسسى 
رؤيتالمدرست 
رسالم‌المدرسي 
اللاتحہ الطلابيت 
نتائج الطلاب 


محتويات متغيرة حسب الصفحط 


اعلانات المدرست 


شريط متحرك 
من أسفل إلى 
أعلى 


جميع الحقوق محفوظى لعام ۲١١١‏ 


۲٤ 


بنا الفواقع آل الك وة دات الظا الدينامیكی 


الشكل السابق يمثل رسم تخطيطى للموقع ؛ حيث إن المحتويات 
الموجودة فى الشكل السابق هى محتويات سيتم تثبيتها بجميع الصفحات 
حيث يلاحظ أعلى الرسم واجهة الموقع ثم شريط يمثل روابط لصفحات 
سنقوم بإنشائها ولكن يوجد بالروابط السابقة صفحات متشعبة أى ينبثق منها 
صفحات أخرى . فعلى سبيل المثال صفحة " إدارة النظام " سينبثق منها 
عدة صفحات تمكن المستخدم صاحب الصلاحيات من إدارة الموقع وهذه 
الصفحات ستكون ديناميكية حيث سنقوم بتصميمها لاحقا » ونلاحظ أيضا فى 
الجزء الأيمن من الرسم التخطيطى وجود قائمة جانبية وذلك ؛ لكى يتمكن 
الزائر من تصفح الموقع وسوف نقوم بتصميم هذه القائمة ببرنامج 
Easy Button‏ لاحقا . 


والآن عزیزی القاریء افتح برنامج eعے۴‏ ,ص۴۲ › ثم اختر 
من قائمة ٣٥‏ الأمر ۸ع م0 ۰ تم افتح صفحة ٥×‏ لم] التی تم إنشائها داخل 
برنامج Shop‏ 0 فعند تنفيذ الخطوة السابقة ستجد الصفحة 


Ele Edt Yew Farmat Tools le Frame 
0-#- E4 3/۰ & û | + Ê 
Normal > (default fonty B 


ارش لحد السھد اندر س و 


قم بالانتقال إلى الوضع [1١]‏ من أسفل الصفحة لمعاينة كود 
الصفحة حيث ستجد كود الصفحة كما بالشكل التالى : 


۲۵ 


لواف الك هة ذاة الطاة الاين 


index.html „_default.asp 
THTHLS 


HEAD 
4TITLE>header <FTITLE> 


THETA HTTP-EQUIY="Content-Type" CONTENT="textfhtunl; charset=windows-l1356"™ 


4# HEADY 
<BODY BSCOLOR=#FFFFFF LEFTMARGIN=O TOFMARGIN=DO MARSINVIDTH=O MARGINHEIGHT=0* 
g!== TuigeReady Slices {header p5} == 
TABLE VIPTH=979 BORDER=DN CELLPADDING=ON CELLSPACING=U» 
ZTR> 
<TD> 
XIHG SREC="inmages#index_Dl. gif" WIDTH=979 HEIGHT=S55 ALT=""*4 TD» 
FTF 
<TR> 
TD» 
INE SEC="iumagez/index_ Ud. gif" WIPTH=273 HEIGHT=S6 ALT=""=4 TDs 
<#TR> 
TTR 
TD» 
XING SRC="iumages#index_03. gif" WIDTH=473 HEIGHET=45 ALT=" TD» 
FTF 
<#TABLE> 
g#!== End TIunageReady Slices ==> 
#BUODT: 
< #HTHLZ 


فى الشكل السابق نجد كود ۳11 الخاص بالصفحة متضمنا كود 
اذز اج واجهة الموق داخل الضفحة والاأن تحن ريد سيق الواجهة و تش 
الصفحات كما تم رسمها مسبقا ولعمل ذلك لاحظ معى عزيزى القارىء 
الكود الخاص بواجهة الموقع حيث ستجده موضحا بالكود كما بالشكل التالى: 


%1-- IuagEReady Slices [header .pad| --* 
TABLE WIDTH=919 BORDER=O CELLPADDINIE=O CELLSPACINE=N: 


TR 
TD: 
IM SEL="inagesfindex_ Ol. gif" WIDTH= REICHT=55 ALT=" TDs 
TR 
TR 
TD? 
IME SRL="inages/index_ld. gif" WIPTH=9?9 REICRT=S5E ALT=" TD: 
TR 
TR 
ID» 
IME SREL="inagez/index_03. gif" WIPTH=979 REICET=45 ALT=" TD? 
TR 
<#TABLE+ 


+1-- End IuagEReady Slices --%* 


۲٣ 


بنا العو اق آلالكم وة دات الظا الديناموكص 
قم بتحديد هذا الكود ثم قم بعمل ں٣‏ للكود ثم انتقل إلى الوضع 
1 من أسفل الصفحة حيث سيصبح شكل الصفحة بيضاء تم اتجه إلى 
قائمة ٥1ا14‏ واختر الأمر ٤۲٥ءم]‏ › تم م1طاج1 وعدل القيم الموجودة بمربع 
اران اتس كما باشكل اال : 


Insert [able 2K 


1112 گ1‎ €€AAAkAkÃkhفhفگآÎگصگگصگضکککککگگکگگکگAکگسک‎ 
Rows: ۳ Lalurmns: [1 ا‎ 
Layauk 


Alignment: [center =[ I Specify width: 
2 7 @ 1 
Border size: 1 E * In pixels 


f In percent 
Zell padding: 13 = 


kell spacing: 1 2 
Table Direction: [Right-to- 3 


Sek 


IW Set as default for new tables 


Style... | 


لاحظ معى مربع الحوار السابق ستجد أننا قد قمنا بإدراج جدول مكون 
من عمود واحد ›» وصق واحد › وحجم حدوده ( ۰ ) أى ذى حدود وهمية 
وأيضا ستجد أننا قد قمنا بتحديد عرض الجدول ٩۷۹‏ بكسل واختيار محاذاة 
الجدول بمنتصف الصفحة وإليك كود الجدول المدرج على النحو التالى : 
<center>‏ 
<table border="0"' cellpadding="0" cellspacing="0" style=" border-collapse:‏ 


collapse" bordercolor="#111111" width="979" id=" AutoNumber1'"'> 
<tr> 


<td>&nbsp;</td> 
</tr> 
</table> 
</center> 


بعد قيامك بإدراج الجدول سواء عن طريق قائمة مإطه1 أو عن 
طريق كتابة الكود السابق انتقل إلى وضع H1١1‏ ثم قم بعمل موو" 
للكود الخاص بواجهة الموقع فستجد أن كود واجهة الموقع تم إدراجه داخل 
كود الجدول ذى الحدود الوهمية الذى تم إدرجه مسبقاً . 


۲۷ 


الوا الك هة ذاة الطاة الاين 


بعد لصق كود واجهة الموقع انتقل إلى الوضع هم۲٥‏ مرة أخرى 
لتجد الواجهة كما بالشكل التالى : 


EE 


Ele E 


5 


کو 3 


ن ا ادارا س 


يلاحظ من الشكل السابق أن واجهة الموقع أصبحت فى منتصف 
الصفحة وذلك ؛ لأن كود واجهة الموقع تم إدراجه داخل الجدول 
وحيث إن الجدول تم إدراجه بمنتصف الصفحة فأصبحت واجهة الموقع 
أيضا فى š 1١ » ê‏ ك 

بعد ذلك قم بوضع المؤشر خارج الجدول ثم قم بإدراج جدول آخر لكى 
يتم عمل القائمة الأفقية به » وذلك كما بالرسم التخطيطى الذى تم توضيحه مسبقا 
حيث سيتم كتابة عناوين الصفحات التى نرغب فى عمل ارتباطات تشعبية لها 
ويمكنك تنسيقها بالشكل الذى ترغب فيه لتصبح كما بالشكل التالى : 


Ele E 


ع ت لاہ الد اتر دای س 


ا ف کن ای آنه کے ر اچ حدر ل ید و کے کا رین 
الصفحات المطلوب عمل ارتباط لها > وقد تم تنسيق النصوص كما بالشكل 
السابق ويمكنك أيضا ملء الجدول بأحد الألوان المتوفرة فى شريط الأدوات 
Br 56‏ & 1esطa‏ ا عن طریق تحدید الجدول کما بالشکل التالی : 


۸ 


بنا الفواقع آل الك وة دات الظاع الديداموكن 


Ja” FE EEE 2. ne -# 


Mews 


Folders 


Reports 


ثم اختيار اللون OTE‏ ا أسفل هذه السطور 
وذلك عن طریق شریط أدوات esل0 B8‏ & 1esطاھ٣‏ . 


ك 
عق ر ارت وره فل ا اة اك لرن افر 
ملء الجدول به ويمكنك أيضا اختيار خلفية ذو مظهر جمالى للجدول » ولكن 
تاودن ف اه الحا رر ل ق ا و و 
مالف ع رد رک اور دخ الحرل ت ا دل ر اام 


للماوس » ثم اختيار وعن)اممهإ۴ ماطه۲ › وبعد ذلك سيظهر مربع حوار 
كما بالشكل التالى : 


Table Properties 
Layouk > 
Alignrnent: [center 3 I Specify width: 


Float: | Default آ<‎ |279 fF In pixels 
f In percent 


cell padding: 1 FT specify height: 

tell spacing: م‎ 1 #7 Tû pixels 
TT In percent 

Table Direction: [Right-to-left ج‎ 


Borders - 


Size: 1۳ 2 Light border: ۳٣ Autormatic 5 


Color: ل‎ 0 — Î Darkborder: ۳ Automatic * 


I Showy both cells and table borders 


Background - 


E | Wl Automat 7| 


[¥ lse background picture 


SEylE,., 814 Lancel | Apply 


۳۹ 


ا اأفر اق الك فة ذاف لكات الدرتاضيكي 

من ال جرتم الك رار لر عه ا ك ا ف اا اهار 

Use background Picture‏ » تم قم بالضغط علی زر 80We‏ سیظھر 

مربع حوار يمكنك استعراض مجلد ومع ص] من خلاله › ثم اختيار الصورة 
المراد جعلها خلفية لتظهر الصفحة كما بالشكل التالى : 


سة | استطلذعات | سجل الزوار | اتصل بنا 


ويجب أن تكون الخلفية المختارة قد تم تقطيعها بواسطة برنامج 
Photo Shop‏ لتظھر کما بالشکل التالی : 


والشكل السابق يمثل الصورة التى قمت باختيارها لتكون خلفية 

والآن قم بإدراج جدول آخر لعمل شريط متحرك ليتم عرض أخر 
المستجدات به تم قم باختيار صورة أخرى لتكون خلفية الجدول 
أو قم بملء الجدول بلون معين بالطرق نفسه السابق ذكرها لتظهر الصفحة 
كما بالشکل التالی : 


. 
1 
HF 


اسفطالرسد الحدنده السهند ار 9و mn‏ 


۳۰ 


بنا افو اق الك وة اة الان الذراسكی 
ويلاحظ من الشكل السابق أنه قد تم كتابة عبارة " آخر المستجدات : 

مرحبا بكم فى الموقع الجديد لمدرسة الشهيد المنزلاوى الإبتدائية " ويمكنك 
تحريك هذه العبارة عن طريق تحديدها » ثم التوجه إلى قائمة )موم 

> تم اختیار ٤٥٥۳0٥,٥٣۲‏ ط۷ سیظهر مربع حوار من خلاله یتم اختیار 
الأمر Dynamic Efe‏ » تم تحدید ueeوMa۲‏ کما بالشکل التالی : 


Insert Web Component 


Zomponent type: Lhonse an effect: 

E Cynamic Effects Hover Button 

Û Web Search | 

E Spreadsheets and charts Banner ûd Manager 

Hit Counter 
Photo Gallery 
Included Content 


Make kext scroll horizontally across the screen, 


Find components 
on the web Cancel EE exl 2 


Fi 


وبعد تحديد الخيارات السابقة قم بالضغط على زر 1یہ۴ سيظهر 
قزمم وار کد بالكل الال 


Marquee Properties 


18×٤: مرحباً بكم قى الموقع الجنيد لمدرسة الشهيد المنزلاوف الإبتدائيةا‎ 
Direction Speed ¬ Behavior 
` Left Delay: f scroll 
f Right ن‎ . ” slide 
` Alternate 


Size Repeat 


WW width: | {F In pixels lw Continuously 


f” In percent ا‎ 
للك‎ 


[I Height: ji f Inf 
E Background color: 


Wl Automatic r” 
Style... Cancel | 


۳ 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 

فمن خلال مربع الحوار السابق يمكنك تعديل العبارة التى تمتل 

الشريط المتحرك › ويمكنك أيضا اختيار التأثيرات المرغوب فيها حيث 

يوجد العديد من التأثيرات وبعد الضغط على زر )0 ستظهر الصفحة 
كما بالشكل التالى : 


Microsoft FrontPage - D:\Project Booklin dex. html, 
Eile view Insert Formal Is Table Frames 


ويلاحظ من الشكل السابق استبعاد العبارة التى تم تنفيذ الأمر عليها 
عن عبارة " آخر المستجدات " ومسافة البعد هو النطاق الذى سيتحرك 
الشرنط داخلةء ويمكنك اخقار ذلك عن طرق الثوجة إل المجلد انذى 
قمت بحفظ الصفحات به ثم فتح صفحة ×علم! . 


بعد تنفيذ الخطوة السابقة قم بوضع المؤشر خارج الجدول ثم قم 
را ورن آخر رفن اعات لجرل لى ت لراج راك را ب 
ولكن يحتوى على عمودين بدلا من عمود واحد لتظهر الصفحة كما بالشكل 
التالى : 


ويلاحظ من الشكل السابق أنه تم اختيار جدول يحتوى على عمودين 
حيث يمل العمود الأول من الجدول الجزء الخاص بالقائمة الرئيسية التى 
تم توضيحها فى الرسم التخطيطى والجزء الثانى يمثل الجزء الخاص 


۴۲ 


بثاء الفواقع آلالكم وة دات الظات الدينامیكی 


الر تة لتظهر الضقحة كا بالشكل الال : 


مدرسة منية المرشد الجديدة ترحب بكم فى الموقع الرسمي الجديد 


تتشرف مدرسة منية المرشد الإبتدائية الجديدة ( الشهيد المنزلاوى ) بإطلاق هذا الموقع المتواضع حيث 
ا يمكنكم التعرف على أخبار المدرسة والألشطة القائمة فى المدرسة من خلال هذا الموقع و نحيط علم م اذ ا 3 
سيتم نشر تانج طلاب المدرسة على الموقع الرسمى و ذلك من بداية الفصل الدراسى الثائى لجميع المراحل و ks‏ 
ننوه لسيادتكم أن هذا الموقع سيصبح منبراً لنشر العلم و المعرفة وذلك من خلال انشاء روابط خاصة للمناهج 
الدراسية وللكتب العلمية المختلفة و سوف يتم العمل المتواصل على تطوير الموقع بإستمرار حى يكون مرآة 
للتطورات التى تحدث بالمدرسة . 


فى الشكل السابق تم وضع محتوى الصفحة الرئيسية وهى صفحة 
×ع لہ[ بعد ذلك قم بوضع المؤشر خارج الجدول »۰ تم قم بإدراج جدول جديد 
بنفس إعدادات الجداول السابقة ولكن مكون من عمود واحد وصف واحد› 
ثم قم بكتابة عبارة "حقوق الحفظ " ؛ ليظهر الجزء الأسفل من الصفحة كما 
بالشكل التالى : 


ب ق ن 4 لعام ۲۰۱۱ 


والآن سنتجه إلى الجزء الأيمن » حيث اعتمادا على التخطيط السابق 
فإن هذا الجزء يحتوى على جزأين وهما القائمة الرئيسية والإعلانات 
فاذا قررنا البدء بتصميم القائمة الرئيسية فهذا يتطلب الذهاب إلى برنامج 
Easy Button & menu Mark‏ وعلیك أن تعرف عزیزی القاریء 
أن هذا البرنامج ليس الوحيد ولكن يوجد برامج أخرى عديدة» 
ولكنه من أفضل البرامج من وجهة نظرى . 


ا 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
رابعا : إنشاء القائهة الرئيسة ببرناصج : 
Easy Button & Menu Mark :‏ 
بعد تحميل البرنامج وفتحه ستظهر النافذة الخاصة بالبرنامج 
كما بالشكل التالى : 


NOEL 
2) 
one @ 
ت س‎ ۳ 
al) Kk وھ و ر‎ & %# @ 
e E 
web Page |) #All | Topics 
pubis 
3 n | Bakarouna | 
Menu Colors 
Border Bac kground 
m~” 
N~ 


[Tahoma 


Menu Separator 


Shadow: 


Padding and Spacing 


Border width Spacing 


menu Item: 


الشكل السابق يوضح البرنامج بعد فتحه ونلاحظ أن الجزء الأسفل من 
البرنامج يوجد به العديد من أشكال وأنماط الأزار التى يتم استخدامها فى 
القوائم حيث سيتم اختيار شكل أزرار القائمة من خلاله . ويلاحظ أيضا فى 
نفس نافذة البرنامج الجزء الأيمن من البرنامج حيث يمثل هذا الجزء 
التنسيقات المختلفة للقائمة . فعلى سبيل المثال يحتوى هذا الجزء على لوحة 
تحكم للألوان الخاصة بالشكل الذى قمت باختياره وكذلك يحتوى على أنواع 
الخطوط التى سوف يتم الكتابة بها على أزرارالقوائم وكذلك يحتوى على 
حجم الخطوط أى يحتوى على لوحة تحكم كاملة خاصة بالخطوط وسوف 
نقوم بتصميم القائمة خطوة بخطوة معا ولكن قبل البدء فى تصميم القائمة . 
هل سألت نفسك ماهى الروابط الخاصة بصفحات عناصر القائمة ؟ . 


٤ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
من وجهة نظرى الشخصية › ومن خلال الطريقة التى أتبعها فى 
تصميم المواقع أرى أنه يجب أن يتم كتابة اسماء الصفحات مسبةا قبل البدء 
فى التصميم . فعلى سبيل المتال فقد قمت باختيار اسم الصفحة 
(ine.htmا_Scho01)‏ لكى تكون رابط لصفحة (المدرسة فى سطور) 
راط اضر القانة: 


ا الاسماء المقترحت للصفحات 

المدرس فى سطور School _line.htm‏ 
السياق المؤسسى Context.htm‏ 
رؤيت المدرست Vision.htm‏ 
رسال المدرست School mess.htm‏ 
اللائحى الطلابيت Student reg.htm‏ 

نتائج الطلاب 

الصف الأول والثانى والثالث Search result1.asp‏ 
الصف الرابع والخامس Search_result2.asp‏ 
الحصول على أرقام جلوس الطلاب Search_id.asp‏ 


نلاحظ من الجدول السابق أن قد تم تعيين اسماء افتراضية لصفحات 
المواقع التى نرغب فى ربطها بعناصر القائمة ونلاحظ أيضا أن 
كل الصفحات تنتهى بامتداد اط فيما عدا الصفحات التى ستنبثق من زر 
"نتائج الطلاب" وذلك ؛ لأنها تعتمد على لغة ۸8۴ فى بنائها والتى سوف 
يتم تناولها بجزء مستقل لاحقاً . 


۵ 


فا افوا الك هة داك الاك الاين 


والآن نتجه إلى البرنامج ونبد بالتصميم .... 

قم باختيار أى شكل من أشكال الأزرار التى تتلائم مع تصميم موقعك 
وذلك من الجزء الأسفل بالبرنامج ثم اذهب إلى شريط أدوات البرنامج 
وإضغط غل g Add Item‏ ذلك كما بالشكل التالى : 


۸ 


Ey pen 
Project 


۴ 


Add Iker >‏ ي 
س اة عل ها ال و مقر ا6 كا اكل اقا > 


Hame Help 


مھ کے چ kbk kk‏ 


Mey pen Save pen Save Button Saye Menu Insert into Undo Redo 
Project Project Template a3 Imagë as HTML yeb Page 
Project Publish Edit 


€9 add kem ~ Add Submenu | Delete | | Background | Horizontal 
س‎ 


من الشكل السابق يلاحظ أن الزر الذى قمت باختياره ظهر على نافذة 
البرنامج ويلاحظ أيضا أن القائمة سوف تكون أفقية » ونحن نريد عمل قائمة 
رأسية على يمين الصفحة ولعمل ذلك يمكنك من خلال نفس شريط الأدوات 
اختيار الخيار Vertica1)Righ†(‏ بدلا من [ھH]oriz0nt‏ وسوف تجد 
القائمة بشريط الأدوات كما بالشكل التالى : 


| Horizontal ج‎ 


۳٦ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
من ل اة لن غل فاق ا اكا الان 
Vertica1)Righ)‏ وذلك کما بالشکل التالی : 
Yertical (Right >‏ 


وسوف يظهر الزر الأول بالقائمة عمودي على يمين الصفحة كما 
بالشكل التالى : 


9 
TT gen 3 
د‎ ) 
1# oN O NR @ 
En Insert into Undo Fedo Select Heh Activate About 
ML Web Page اله‎ Topics 
Edit Help: 
Background | Vertical (Right) r Menu Styl Misc 
Menu Colors 
Button 
Border Background 
Mer Box! ME ~ + 


Normal Item: 


والأن نريد كتابة النص المرغوب فيه على الزر » وكذلك نريد كتابة 
الرابط الذى سيتم الإنتقال إليه عند الضغط على الزر » وأيضا نريد تعديل حجم 
الزر . 

ولنبداً بكتابة النص المراد على الزر تم كتابة الرابط المراد › ولعمل ذلك 
قم بتحديد الزر عن طريق النقر بزر الماوس الأيسر ثم من خلال الجزء الأيمن 
للبرنامج اختر التبویب ))٥۸‏ ں8 وسوف يظهر التبویب كما بالشكل التالى : 


Button Button Styles Menu Style MisC 


lz 

9 

2 
4| |4 ا 

3 

N 
E & 4 


z 
[" 
3 
PF 
N 
I 
N 


اک اھ 


۴۷ 


بناء المواقع ا[إلكت ونية ذات الطابع الديناميكى 

من خلال الشكل السابق نلاحظ أننا قد قمنا بكتابة عبارة (أبواب 

الموقع) وقد ظهرت هده العبارةعلى الزر > ويمكنك أيضا كتابة الرابط 

ولأن الزر الخاص ب (أبواب الموقع) لانريد ربطه بأى صفحات فإننا 
لم نكتب أى رابط بجانب كلمة )م1 . 

ويمكنك عزيزى القارىء إكمال باقى عناصر القائمة بالطريقة نفسها 

إلى ان تظهر القائمة كما بالشكل التالى : 

Button and Menu Arrows | 


IW Submenu arrows 


Other 


Sparing between buttons: 7 اتد‎ 


Menu Effects 


FF menu transparency 


FT Menu shadows 


Popup effect: Faden >l 
لهرت كما بالكل السان وك تمل حجها عن طريق اليب‎ 
: کما بالشکل التالی‎ Button Styاe‎ 


اعلانات الصدرسسة 


Button Size 


Width: Height: 


| ` قuko‎ Size 05 = xX 38 ا‎ 


ومن الشكل السابق يلاحظ أننا قد قمنا بتحديد عرض وارتفاع أزرار 


۴۸ 


بنا الفواقع آل الك وة دات الظاع الديناموكن 


والآن نريد عمل القائمة المنسدلة من زر (نتائج الطلاب) وللقيام بذلك 
قم بتحديد زر (نتائج الطلاب) ثم انتقل إلى شريط الأدوات » واضغط على 
Sub tem‏ ۸4 فستجد أنه تم إدراج زر منبثق من زر (نتائج الطلاب) 


الصف الأول والثانى والثالث الابتدائى & 
الصف الرابع والخامس الابتدائى © 
اعلانات القدذرسة الخو غلى اقام لجف د 08 
ومن الشكل السابق نلاحظ أننا قد قمنا بعمل قائمة منسدلة من زر 
(نتائج الطلاب) وهذه القائمة مكونة من تلاتة أزار . وأذگرك عزيزى 
القارىء بأن تقوم بكتابة الرابط المخصص لكل صفحة كما تم توضيحه 
مسبقا بجدول الروابط المقترحة » وأنصحك أيضا بأن تقوم بكتابة نفس 
اسماء الروابط التى تم توضيحها فى الجدول السابق حتى تتمكن من استئناف 
عملية بناء الموقع معنا بسهولة ويسر . وأحب أن أنوه لك أيضا بأن هذا 
البرنامج العملاق يُمكنك من خلاله عمل الكثير من التأثيرات على الأزرار 
ويمكنك اكتشافها بنفسك لأن هذا ليس مجال دراستنا . 
و کی غ 
برنامج ع۴4 ۴0n)‏ . ولعمل ذلك قم ڊlلضhéiط Insert Into Web ”Je‏ 
Page‏ کما بالشکل التالی : 


۳۹ 


فا الوا الك هة ذا ك الاك الافيكن 


Insert into 
yeb Page 


بعد الضقط على الكل السا تهر نافذة كما بالشكل اال ٠‏ 


What would you like to do? 


(& Insert menu in my weh page code 
Use this, if your web page file is stored in a fils on this computer, 


Select your web page file: 


{` Just generate HTML code and necessary files 
se this, if you prefer to handle the HTML code yourself or if your web page is not stored in a local file. 


i Information 


To publish your menu, you need anı artess ta your web page files and cade, IF your website is stored in Files on this computer, 
the menu can be added automatically, othwerise you will have ko place the menu code and publish the necessary files manually, 


cCantel 1 Next =‏ 
من خلال النافذة السابقة قم بتحديد Jlخيlر Insert Menu In My Web‏ 
Page Code‏ ¢ ثم أاضخط علی الزر Browse‏ ستظهر نافدة تستعرض جهازك 
قم باختیار صفحة دنط.×هلم] التى قمنا بتصميمها ثم اضغط Open‏ »> بعد ذلك 
قم بالضغط على زر ٥×‏ ستظهر نافذة كما بالشكل التالى : 


Insert into Web Page 


where would you like to place your menu? 


Select the place in your web page cade where to insert the menu 


am | 
<HEAD> 
4TITLE>header </TITLE> 
«HETA HTTP-EQOUIV="Content-Type" CONTENT="text/html: charset=windous-12 56">» 
</HEAD> 
i RE EAREEESY 
E 
<table pordesr="0" cellpadding="0" cellspaczing="0" style='"'korder-collapze 
drs 
<td> 
<TABLE WIDTH=979 EORDER=O CELLPADD ING=D CELLSPACING=D> 
<TR 
«r> 


«IMG SRC="inages/index_01. gif" WIDTH=979 HEIGHT=S5 


3 


IF Shon preview in the next step Auto Insert at the Beginning 
Cancel 


با الغو اق الك وة اة الان اللا سض 

ففى الشكل السابق نلاحظ أنه قد تم فتح كود صفحة (tط.×٥‏ ہ1 ) قم 

بالضغط على زر Auto اnsert At The Begginni¬ng‏ حیث إنھ سیتم 

اا اا ا ا کک کی ا 
ذلك قم بالضغط على زر ٥×‏ ستظهر نافذة كما بالشكل التالى : 


Cancel E |_ e> |‏ 
بلأحظ من الشكل الساق ظهور تافذة تمثل معايثة للقائمة داخل 
الق ا فن اشر ود اقا یر کے لے اس 
فلا تبالى بها فسوف يتم تعديلها إلى المكان المراد ظهورها به داخل برنامج 
۴0n Pa‏ › بعد ذلك قم بالضغط علی زر ۸٥×‏ ستظھر نافذة يمکنك 
من خلال هذه النافذة حفظ المشروع بأى اسم حتى يتسنى لك التعديل فيه 
فيما بعد وذلك عن طريق تحدıد‏ |Jخيlر Iwould like To save Project‏ 
ك الضطط ع زر 6ة آر مك ناهل هت الخطو ةز اس ها 
زر ۴,11 مباشرة . 


3 


ء المواقع الالكترونية ذات الطابع الديناميكى 
خامسا: تنسيق الكود وحفخ الصفحات من داخل 
ناھج Front Page‏ : 


قم بفتح برنامج ۴4e‏ ٤م۴۲0‏ › ثم قم باستدعاء صفحة ×علم] عن 
طریق File‏ < ثم اختر Open‏ ستظهر الصفحة كما بالشكل التالى 


HE 


من خلال الشكل السابق نلاحظ أن القائمة التى قمنا بإدراجها داخل 
الصفحة تظهر فى أعلى الصفحة ونحن لانرغب فى ظهورها بهذا الشكل 
وإنما نريد ظهورها فى المكان الذى قمنا بتخصيصه لها a‏ التخطيطى 
ولعمل ذلك قم بالذهاب إلى كرد ۳1M‏ الخاص بالصفحة ذ ثم قم بتحديد 
الكود الخاص بالقائمة كما بالشكل التالى 


index.html 


٤۲ 


بنا الفواقع آل الك وة دات الظا الدينامیكین 


ففى الشكل السابق وجدنا الكود فى أعلى الصفحة بعد الوسم 
11M1<‏ > فقمنا بتحديده ويمكنك إجراء عملية نقله عن طريق عمل ں٣‏ › 
تم الانتقال إلى الوضع ٥۲٣21‏ » تم وضع المؤشر فى المكان الذى ترغب 
فى وضع القائمة به » ثم الانتقال إلى وضع 111 مرة أخرى › ثم قم 
باختيار من ازل ع الأمر وج٥‏ » تم قم بالانتقال إلى الوضع اهاه" مرة 
أخرى لتجد الصفحة تظهر كما بالشكل التالى : 


ادتكم أن هذا الموقع سيصبح منبراً لنشر العلم و المعرفةإ وذلك من خلال انشاء رواب 
وللكتب العلمية المختلفة و سوف يتم العمل المتواصل على تطوير الموقع بإستمرار حتى يكون مرآة 


ف الكل السا فد ان القاة قد لهرت بالشكل الراد ,ر كتك 
تجربتها عن طريق فتح صفحة Index.htm‏ > ولعلك تلاحظ أن هذه 
العملة ماف إلا غملة تقل للكود الخاص بالفاتمة من أعلى الضفحة إل 
والآن نريد كتابة جملة تتحرك من أسفل إلى أعلى وتكون موقعها تحت 
زر إعلانات المدرسة . ولعمل ذلك نقوم بوضع المؤشر فى المكان المراد 
ظهور الإعلان به ثم ننتقل إلى الوضع ۳1M‏ ثم نكتب كلمات الإعلان 
ناکود اال 
<MARQUEE scrollAmount=2 direction=up width=147 height=257 style="font-‏ 


size: 14pt; color: #000080" scrolldelay="74'"><CENTER><FONT 
color=size=2><S1 RONG &١وٺںji)ا ؛ عن تقدیم خدماتها للأسرة مط >تعلن مدرسة الشهيد‎ 


؛ الساعة الثاني إلى الساعة الثالثت م5 والمجتمع المحلى من خلال فتح حجرة الكمبيوتر والملكتبت& 
sp; >/MARQUEE><br.><[ td >‏ nمساءا‏ يومى الأحد والأريعاء من كل أسبوع:& 


عند قيامك بنسخ الكود من أحد البرامج إلى برنامج ٥عهم ۴٣٣۲‏ فإن الكود يظهر على هيئة أكواد غير مفهومة 
لذلك قم بنسخ الكود ثم قم بعمل لصق داخل صفحة ل82 م٠"‏ أولا ثم قم بإعادة نسخه مرة أخرى من خلال 
صفحة ل81 م)N0‏ ثم قم بلصقه داخل برنامج ععه۴ ۴۲٠"۲‏ فبعد تلك العملية سيظهر الكود بشكله الصحيح 


٤۳ 


اغراف الك هة ذاة الطاة الاين 


سادسا : وضع خلفية الصفحة وخلفية الجداول : 
يمكنك وضع خلفية للصفحة وذلك عن طريق كتابة الكود التالى فى 
أعلى الصفحة : 
من الكود السابق نلاحظ أننا قد قمنا بإخبار المتصفح بأننا نريد 
وضع خلفية للصفحة وذلك عن طريق كتابة =roundإbackg <body‏ 


تم بعد ذلك قمنا بكتابة امتداد الصورة التى نرغب فى وضعها خلفية 
"images/background.GIF'">‏ 


و بعد القيام بوضع خلفية للصفحة فإننا نريد تغيير خلفية الجداول التى 
نعمل بها إلى لون أخر. ولعمل ذلك فسوف نقوم بكتابة كود لكى يتم تغيير 
خف الول ولك كل الحو اتال 


bgcolor="#FFFFFF" 
وعند وضع هذا الكود فى بداية كود الجدول سيظهر شكل الكود كما‎ 
: بالشكل التالى‎ 
<td width="226" valign="top" height="13" bgcolor="#FFFFFF"Y 
ومن الشكل السابق يلاحظ الكود الخاص بخلفية الجدول حيث إن‎ 
هو الكود الخاص باللون وبعد قيامك بتغيير خلفية الصفحة‎ "#۴۴۴۴۴۴۳ 
: وتغيير لون الجدول ستظهر الصفحة كما بالشكل التالى‎ 


j index.html, 


تنوه د لسیادتکم ان هذا الموقع سيصبح منبرأ لنشر العلم و المعرفة وذلك من 
الدراسية وللكتب العلمية المختلفة و سوف يتم العمل المتواصل على تطوير افر رارح هة 


r — 


إدارة الموقچ 
ومن الشكل السابق يلاحظ أنه تم وضع خلفية وتم تغيير لون التعبئة 
للجداول باللون الأبيض . 


٤ 


بنا الفواقع آل الك وهة دات الظا الدينامیكی 


سابعا : ربط العناوين بالروابط : 
الآن بعد أن انتهينا من تصميم صفحة موقعنا فإنه يتبقى لنا شريط قد 
قمنا بكتابة عناوين صفحات به ولم يتم ربط هذه العناوين بالروابط الخاصة 
بها وكما ذكرنا من قبل عزيزى القارىء فيجب عليك أن تكون قد قمت 
بحن ناء افر اضية ليذه الروابظ فى هذا الأساس الك جقرل يرضح 
الاسماء المقترحة للصفحات الموجودة بالشريط الموجود أسفل واجهة الموقع 
وذلك على النحو التالى : 
اسم الرابط الاسماء المقترحى للصفحات 
الصفحمہ الرئيسيہ Index.htm‏ 
صورالمدرسي School pho.htm‏ 
اتصل بنا Contact _us.htm‏ 
إدارة النظام Admin _login.asp‏ 
استطلاعات Vote.asp‏ 
سجل الزوار Reco_visit.asp‏ 
الزن اسان برض الاس اقرح لكا ين المرجوة باارط 
الموجود أسفل واجهة الموقع ويمكنك وضع هذه الروابط للعناوين عن طريق 
تحديد العنوان › ثم الضغط بالزر الأیمن للماوس « ڌم |ختيlر Hyper link‏ 
ليظهر مربع حوار كما بالشكل التالى : 


Edit Hyperlink 


Link to: Text to display: ا‎ SrreenTip... 


5 Look in: ۳ Project Book. 
Existing File or 
Web Page & index.html {open} Bookmark, , 

bF3g01 ,gif Target Frame... 

Place in This گا‎ b73g01_1 gif 
Document Et br3g01_&. gif Parameters... 
br3g02 gif 
ف‎ =] sbbtmb73g02_1 gif Style... 
ET Rezert ®] sbbtmb73g02_2, gif 
Dorument Files |] sbbtmb73g03. gif 

l=] sbbtmh73q03 1.qif 


Address: [index.htm ت‎ Remove Link 


E-mail Address 
Cancel 


۵ 


ف العاف الك هة اة الطاكة الاين 


والشكل السابق يوضح مربع الحوار الذى يمكنك من خلاله وضع 
الرابط الخاص بالعنوان الذدی قمت بتحدیده وفى هذا الشكل قمت بوضع 
رابط الصفحة الرئيسية وهو 1صط.×عإم!] كما بالشكل التالى : 


Address: [inde::. html] <| Remove Link 
Lancel 
ENG O EE 
. الشريط‎ 


ثاهنا : إنشاء روابط العناوين : 

بعد أن انتهينا من ربط العناوين بالروابط وبعد التأكد من أننا لسنا 
بحاجة إلى التعديل فى العناوين مرة أخرى . فيجب علينا أن نقوم بإنشاء 
روابط هذه العناوين . ولعمل ذلك يجب أن يتم عمل حفظ باسم لكل صفحة 
وتغيير محتوياتها حسب الطلب فالموقع الذى نقوم بتصميمه حاليا يوجد به 
العديد من الصفحات الغير تفاعلية أى بصيغة 11[ فينبغى أولا أن يتم 
الانتهاء من تصميمها ثم نقوم بتصميم وبرمجة الصفحات الديناميكية التى 
تعتمد على لغة ۸5۴ » فإذا قمنا بحصر الصفحات التى توجد بهذا الموقع 
والتى تعتمد على لغة [1M]‏ فسنجد أنه يوجد لدنيا سبع صفحات 


وهی کالتالی : 
العناوين الصفحات المطلوب إنشائها 
المدرس فى سطور School _line.htm‏ 
السياق المؤسسى Context.htm‏ 
رؤي المدرسي Vision.htm‏ 
رسال المدرست School _mess.htm‏ 
اللاتحہ الطلابيت Student reg.htm‏ 
صورالمدرست School pho.htm‏ 
اتصل بنا Contact _ us.htm‏ 


٣٦ 


بناء المواقع الالكتروهة ذات الطابع الديناميكى 
الجدول السابق يمتل الصفحات ذات المحتوى التاببت أى 
التى تعتمد على لغة 111 ويمكنك إنشائها عن طريق قائمة ٥ا۴‏ 

ثم اختیار یھ 84۷٥‏ سيظهر مربع حوار كما بالشكل التالى : 


Save As 


7۳ Project Book. | 4# î EE] > Tools 7 


School_line, htm‏ آ# 


Page title: المدوسة فى سطور‎ a 
aH File nare: HTMIEETT a 
My Metwork, 5 


Places Save as type! [web Pages (*.htm;*.html;*,shtmlj*,shtm;*,stm;*,asp;*. > |‏ 
و ا ا وو 
(طtط.ineا_1اhooطSc)‏ حيث يمتل هذا الاسم رابط العنوان (المدرسة فى 
سطور) وبعد الضغط على زر م8۷ يمكنك تغيير محتوى الصفحة حسب 
رغبتك ويمكنك النظر إلى الشكل التالى حيث قمت بتغيير المحتوى وحفظه 


| School Jine.htm \, 


عادر داه السھد الردری س 


المدرسة فى سطو 
تقع مدرستي ( الشهيد المنزلاوي )بقرية منية المرثد التابعة لمركز. مطويس بمحافظة كفر الخ 

أشنت عام ۱۹۷١‏ بمثزل مؤجر ملك أحد مواطئي القرية ء ربدا العمل بها عن طريق ثقل بعض تلاميذ مدرسة مثبة المرشد إليها . 
سميت بهذا الاسم تخليدا لذكرى الشهيدين ( عبد المطلب عبد الفتاح المنزلاي) و ( أنور إبراهيم المنزلاري )واللذين استشهدا في : 
الاستنزاف عام ۱۹١۹‏ . 

وكان ومازال العاملون بالمدرسة بؤمتون نهم أصحاب رسالة علمية وتربوية تحمل في طياتها نقلة اجتماعية وحضارية لتحقيق ‏ : 
أفضل لأبناء القرية مما كان له أثره الواضج والملموس في أن تبوأت المدرسة مكائة الصدارة بالإدارة وحصات على المراكز الأول في | 
مظم المجالات|. 

نفلت المدرسة بمبفاها الحالي و المستقل عام ٠۹۹١‏ . | 


٤۷ 


بناء المواقع الإلكترونية ذات الطابع الديناميكى 
ويمكنك اتباع نفس الطريقة مع جميع الروابط السابقة ويمكنك أيضاً 
إدراج صور داخل الصفحات وذلك عن طريق قائمة ۲۲٥وم]‏ › ثم اختيار 
Picture‏ » تم اختیار ۴۲٥۳ ۴1٥‏ › تم تحديد الصور المراد إدراجها . 
وأذكرك عزيزى القارىء بأننا قد قمنا بترك الصفحات التى تنتهى 
بامتداد ۸5۴ لأننا سوف نتناول تصميمها وبرمجتها لاحقا بالتفصيل . 
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القصل العالت 
تثبيت الخادم |١١‏ 


لمعاينة صفحات ۸5۲ 


اااتص- 0 .0 


بناء المواقع الإالكترونية ذات الطابع الديناميكى 
الفصل الثالثف 
تثبيت الخادم 115 لعاينة صفجات ۸S۲‏ 


اوا :اسو 118 

( Internet Information Services) — رiصتٿخ|ا‎ jع عبارة‎ 5S 
أى باللغة العربية (خدمات معلومات الإنترنت)» و 118 يعد بمثابة سيرفير‎ 
(خادم) محلى أى على جهاز الكمبيوتر الخاص بك فقط › حيث يمكنك معاينة‎ 
؛ لأن هذه الصفحات لا يمكنك فتحها بطريقة‎ A8۶ الصفحات الخاصة بلغة‎ 
عادية كصفحات ۳1۷1 لذلك يتم تثبيت سيرفير محلى لمعاينة الصفحات‎ 
. 118 يطلق عليه‎ 


ثانیا : تثبیت خادم :HS‏ 

التشغيل ws‏ 0لم داخل ال دوه K5-R‏ الخاص بجهازك › ثم انتقل إلى 
قائمة †۾†S‏ ۰ ثم قم بlختيlر Add or Remove eû «< Control panel‏ 
‰rعہآاP‏ لیظھر مربع حوار کما بالشکل التالی : 


ê Add or Femoye Programs E EK 


r ا‎ 
65 Currently installed prograrns: Show updates Sort by: | Hame 


Zhange or 
Remoye 
Programs 


Add hew 
Programs TÊ ABEY'Y' FineReader 6.0 Professional Trial Size 47, 730ME 


Adobe Flash Player 10 Active‏ ء1 
EÛ dobe Flash Player 10 Plugin‏ | 


AddfRemove @ Adobe Photoshop 7.0 ME Size 157,000MB 


Winds 


Camponents EW Adobe Reader 8.1.0 Size S50.DBOMB 


@ jj Automatic Reader û Gold Size 117,000ME 


E Avira Antivir Personal - Free Antivirus Size 163,0DOMB 
Sek Program 


Access anl jÎ Avisynth 2,5 Size 6.BDOMB 
Defaults 

wm Broadcom Management Programs Size #,880MB 

Broadcom Netxtreme Ethernet Controller Size D,390MB‏ اا 

O doPDF 7.1 printer Size 4.700MB 


بنا الفواقع آل الك وة دات الظاع الديدامیكن 


من کا مرت الخرار ارک اق ای ت ات غ 
Remove Windows Compenents‏ حیث تبدو الأیقونة کما 


بالشكل التالى : 


AddJRermoye 
irıdoys 
Lomponenkts 


عند الضخغط علی الأيقونة الموجودة بالشکل السابق سيظهر مربع حوار کما 
بالشكل التالى : 


Windows Components Wizard 


Windows Components 
ou can add or remove components of Windows XP. 


û add or remove a cornponert, click the checkbon, û shaded box means that only 
part of the cornponent will be installed. To see what's included in a cornponent, click. 


Details. 

Components: 

LJ] EP Indexing Service 

WW ğğÎ Internet Explorer 

E lnlernet Information Ser (S] 
L1 8) Management and Monitoring Tools 
[I Ê Meszana I ıeuıiın 


Description: Includes Web and FTP support, along with support for FrontPage, 
transactions, Active Server Pages, and database connections. 


otal disk space required: 53.3 MB 


Space available on disk: 1FF6D.4 MB 


4 Back Nets | Cancel 


22 MB 
nnMR * 


من خلال مربع الحوار السابق قم بتحديد Internet Information‏ 
Services‏ کما بالشکل التالی : 


» & lmtermet lnfarmalian Services [IIS] 
حیٿ سیتم بدء‎ Ne×) بعد اجراء عملية التحديد قم بالضغط على زر‎ 


عملية التثبيت كما بالشكل التالى : 


۵۱ 


الوا الك هة ذاة الاك الافيكن 


Windows Components Wizard 


Configuring Components 
Setup is making the configuration changes you requested. 


78 Please wait while 5 etup contigures the components. This may take 
2 1 several minutes, depending on the components selected. 


Slalus: Completing configuration of lndering Service... 


يلاحظ من الشكل السابق أنه تم البدء فى عملية التبيت حيث سيتم 
الانتظار قليلاً حتى يظهر مربع حوار يخبرك بإنهاء عملية التثبيت حيث 
يظهر مربع الحوار كما بالشكل التالى : 


Windows Components Wizard 


Completing the Windows 
Components Wizard 


ou have successfully completed Ihe Windows 
Components Wizard. 


To close this wizard, click Finish. 


ويلاحظ من الشكل السابق ظهور مربع حوار يخبرنا بأن عملية التثبيت 
قد تمت بنجاح ,بعد ذلك قم بالضغط على زر طیما۴٣‏ لإنهاء معالج التثبيت . 


السيرفير فى شريط العنوان الخاص بمتصفحك وإليك لر ابط على النحى الثالى : 


http://localhost\ 


0۲ 


بنا الفواقع آ[الكم وة دات الظا الدينامكین 


بعد وضع الرابط السابق فى المتصفح الخاص بك ستظهر الصفحات 
الإفتر اة الخاصة تالس رفن النطی گما بالشکل الال : 


Osa - A A @ Osean FE Favorites 


Address | #] http:Jlocalhostylocalstart, asp Eo inks 


fl Windows™ 


Professional 


Your Web service is n Fle Edt view Favorites Tools Help 


You do not currently lA A O Osean Yg rors &@ 


Any users atte mptin g| 
5 |] http :Hflocalhastiiishelpiisimisc/default, asp 


currently receiving 3ı 


mtermet Information Services 


a @ Geting staked 


brings the power of Web ojj 3 $ Administration 
windows, With IIS, you caf 3 ® Active Server Pages Guide 


Getting Started 


Internet Information Services 5.1 (IIS) is the 


files and printers, or you cd) windows XP Web service that makes it easy to 
applications to securely pull publish information on your intranet, 

inforrnatiorı on the Web to 

may your organization shall Vou can click the Synchronize button W on the 


information, I15 is a secu 
building and deploying e-ı 
solutions and mission-criti 
applications to the Web 


Contents tab to align the content and navigation 
panes of the documentation. Use the Search tab to 
locate a topic and ¥ou want to see, click the topic 
link, click the Contents tab, and click the 
Synchronize button, The table of contents displays 
e ae where that topic is located 


» Release Notes: Includes the latest information 
for ensuring proper installation and use of 
Internet Information Services. 


عندما تبدو لك الصفحات كما بالشكل السابق فهذا إثبات لإتمام عملية 
تثبيت السيرفير المحلى بنجاح . 


ملحوظة : 

إذا ظهر لك مربع حوار أثناء عملية التثبيت يخبرك بعدم وجود الملف 
المطلوب لإتمام عملية التثبيت فمن خلال مربع الحوار الذى سيظهر لك قم 
بتغيير الامتداد الخاص بالقرص المرن (۸00 )C5-‏ إلى الامتداد الصحيح 
الموجود على جهازك . فعلى سبيل المثال الشكل التالى يوضح أن امتداد 
القرص المرن فی جھازی هو ( 8:۱) 


کر 


ا 8 


mam 1251 [E:} Local DiskiC:) Ahmed Fahmy 
bi} 


وإذا استمرت المشكلة قم بتغبير الاد طو انة الخاضة بنظام ال غي[ 
بإسطوانة جديدة 


0۳ 


الفصل الرابع 
إنشاء فاعدة بيانات ءئمء»۸ 
وانشاء صفحات إضافة البيانات 
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بنا الفة افع ال الك وة دات الطاب الدينافيكى 


الفقصل اراح 

إنساء فاعدة بیائاتٰ Access‏ 

وانشاء صفحات إضافة البيانات 
ولا : إنشاء قاعدة بیانات ۸٩€‏ : 

قبل أن تبدأً فى عملية إنشاء قاعدة البيانات لا بد وأن تكون على معرفة 

جيدة بما تريد فعله ؟ أى لا بد أن تعرف عدد الجداول التى سيتم إنشائها 
داخل قاعدة البيانات وكذلك عدد الأعمدة (الحقول) فى كل جدول › ومن 
المؤكد أننا فى مشروعنا هذا سنحتاج إلى العديد من الجداول حيث سنقوم 
جدولين فقط حيث إن المشروع فى هذه المرحلة يتطلب جدولا يضم بيانات 
الصفوف (الأول والثانى والثالث) وجدول آخر يضم بيانات الصفوف 
لاختلاف المواد الدراسية للصفوف حيث يضم الجدول الأول بيانات 
ودرجات طلاب الصفوف ( الأول والثانى والثالث ) وسيكون اسم الجدول 
(u141ء٠۲)‏ ويضم الجدول الثانى بيانات ودرجات طلاب الصفوف ( الرابع 
والخامس ) وسوف نقوم بتسميته (112ءع۲) وإليك جدول يوضح اسماء 
الأعمدة المطلوبة فى الجدول (u11ءع)‏ وذلك على النحو التالى : 


۵۵ 


اسم العمود 
id‏ 
name‏ 
num‏ 
Saf‏ 
ara‏ 
Math‏ 
Eng‏ 
Deen‏ 
Act 1‏ 
Act 2‏ 
Tot‏ 


ف ااك ةة ك الاك الاك 


وصف العمود 
ترقیم تلقانی 
الاسم 
رقم الجلوس 
الصف 
اللغة العربية 
ریاضیات 
اللغة الإنجليزية 
تربية دينية 
نشاط١‏ 
نشاط ۲ 


المجموع الكلى 


وإليك جدول آخر يوضح اسماء الأعمدة (الحقول) المطلوبة فى 


الجدول (2٤u1ءء۲)‏ وذلك على النحو التالى : 


اسم العمود 
id‏ 
name‏ 
num‏ 
Saf‏ 
ara‏ 
Math‏ 
Eng‏ 
olom‏ 
Stud‏ 
Deen‏ 
Act 1‏ 
Act 2‏ 
Tot‏ 


وصف العمود 
ترقیم تلقائی 
الاسم 
رقم الجلوس 
الصف 
اللغة العريبة 
ریاضیات 
اللغة الإنجليزيت 
علوم 
وسات تاع 
تربیتدینيت 
نشاط ا۱ 
نشاط ۲ 


الجموع الكلى 


ولإنشاء قاعدة البيانات ببرنامج وومع قم بالاتجاه إلى قائمة )۾†؟ › 


0 


Microsoft Office Access ڌۃ |ختڙر‎ < Al[l programs ثم اختر‎ 


بنا المواقع آ[الكم وه ة دات الظاع الدينامیكی 


Yew Insert Too Window Heb Type aqueston for hep ¥ 


E 
DFR SBY HBR. (E: RB: ol |lB 8r @. 


فالشکل السابق يوضح برنامج ۸)6 بعد فتحه حیث يمکن كت 
من خلال هذه النافذة إنشاء قاعدة بيانات وذلك عن طريق الضغط 
Blank Data Base‏ کما بالشکل التالی : 


| Blank. Database 


وبعد الضغط على مو8 ها٥‏ )ها8 سيظهر مربع حوار يمكنك 
من خلاله كتابة اسم قاعدة البيانات ولقد قمت بتسمية قاعدة البيانات الخاصة 
بمشروعنا بالاسم Wy_25(‏ ه21٣٥"‏ 1ع) ومن خلال نفس مربع الحوار قم 
باختيار مكان لحفظ قاعدة البيانات به » ويجب اختيار نفس المجلد الذى نقوم 
بوضع صفحات الموقع به ليكون مكانا لقاعدة البيانات وبعد ذلك قم بالضغط 
علس Create Jj‏ لتظهر نافذة داخل البرنامج موضح بشريط العنوان 
الخاص بها اسم قاعدة البيانات التى تم إنشائها وذلك كما بالشكل التالى : 


0۷ 


EEK 


Lreate table in Design YiBH 
Lreate table by using wizard 


Lreate table by entering data 


فا الفواف الك هة ذا ك الطاك الصافيكن 


H& elmenzlawy_ 23 : Database (Access Z000 file format) 


LfÊ pen Î besign ZN 


Gbjarks 


El Tables 


Queries 


Forms 
Reports 
Pages 
Macros 
Modules 


tafOlIp5 


Favorites 


غ ا مک اء لرل ع ظرة الفط 
على Create tabاe in design view‏ لتظهر نافذة كما بالشكل التالى : 


اس 
Deseriptian 5‏ 


فمن خلال الشكل السابق يمكنك كتابة اسماء الأعمدة المطلوب إنشائها 


بالجدول لتظهر كما بالشكل التالى : 


Field Name 


ترقیم تلقائی 
الاسم 
رقم الجلوس 
الصغ 


اللخة العربية 
رباضبات 

اللغة الإنجليزية 
النربية الدينية 
نشاط | 

نشاط ۲ 
المجموع التلى 


0۸ 


AutoNumber 
Text 
TEE 
Text 
TEAL 
Text 
Text 
Text 
TEx 
Text 
Text 


HB Tablel : Table 


بنا لفو اق الك وة اة الان الراك 
وفى الشكل السابق تم كتابة اسماء الأعمدة ( الحقول ) الخاصة 
بالجدول (1٤u1ءع)‏ وكذلك تم اختیار عمرا ata‏ من نوع ۲٥×‏ لجمیع 
الأعمدة ماعدا العمود الخاص ب 15 حيث تم اختيار ممر) ta‏ من نوع 
Auto number‏ وكذلك تم کتابة وصف لکل عمود فی 10۸امDescrip‏ › 
وبعد كتابة اسماء الأعمدة قم بالضغط على زر م84۷ حيث يظهر مربع 
حوار يطلب منك كتابة اسم الجدول كما بالشكل التالى : 


Save As 


Table Name: 
result 1| e 
Lancel 
حيث يمكنك من خلاله كتابة اسم الجدول كما بالشكل السابق وعتد الضغط‎ 
: على زر )0 ستظهر رسالة كما بالشكل التالى‎ 


Microsoft Access 


There o primary key defined. 


A4 Although a primar’ fy key isn't te: a red, it's highly recommended, 4 table must have a primary key For you to define a relationship between this table 
گے‎ 0 0 databası 
a primary 0 now? 


O 
. N0 مشروعنا لا تحتاج مفتاح للجدول قم بالضغط على زر‎ 


بعد عمل الخطوات السابقة تكون قد انتهيت من عملية إنشاء الجدول 
(u11ءه)‏ ويمكنك إنشاء الجدول (u12ءع))‏ بإتباع نفس الطريقة السابقة. 


۵۹ 


الا ااك ةة اللات الذرافن 
ثانیا : تصميم صفحة إضافة بيانات الطلاب وبرمجتها : 
ا) تصميم الصفحہ : 

قبل أن نقوم بكتابة أى كود لإضافة البيانات داخل قاعدة البيانات لابد أولا 
أن نقوم بتصميم الصفحة التى من خلالها يمكن لمدير الموقع إضافة بيانات 
ودرجات الطلاب داخل قاعدة البيانات التى قمنا بإنشائها ولعمل ذلك سنقوم بفتح 
صفحة (٥ط.×علہ])‏ ثم نتجھ إلى قائمة ۴1٥‏ ثم نختار وج ٥جو‏ ونقوم بتغيير 
اسم الصفحة إلى (ناء_لله) ثم نختار الامتداد مو كما بالشكل التالى : 


Page title: إضافة نتائج الطلاب‎ ١ إذارة الموقح‎ Change title... 
File name: [add stu.asp = 
7| Lanrcel 
حیث قمنا‎ s2۷ ٥ 65 فالشکل السابق يوضح مربع الحوار الخاص بأمر‎ 
بتغيير اسم الصفحة وامتدادها كما ذكرنا مسبقا . وبعد تغيير امتداد الصفحة‎ 
فقد نرى أنه لا حاجة لوجود القوائم الجانبية الموجودة فى الصفحة وبما أن‎ 
صفحة إضافة نتائج الطلاب من مهام مدير الموقع فسوف يتم عمل قائمة‎ 
أخرى فى نفس مكان القائمة الجانبية التى سنقوم بحذفها وسوف تضم هذه‎ 
القائمة الروابط المختلفة الخاصة بإدارة الموقع ولكن سيتم تصميمها بطريقة‎ 
. أخرى سنتعرف عليها لاحقاً‎ 
كتك حف اقام حن طرق تسد المت بات الى تر غا في‎ 
حذفها ثم الضغط على زر ء)ء1عء( من لوحة المفاتيح فبعد إجراء عملية‎ 
: الحذف فستيدو الصنفحة لك كما بالشكل التالى‎ 


EEE Active Server Pages l*, asp *,aSpx) 


TE 


اک 


11 


ا 


4 
+ 
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بناء المواقع الإلكترونية ذات الطابع الديناميكى 

فالشكل السابق يوضح الصفحة خالية من القائمة الجانبية التى كانت 

موجودة داخل الصفحة ونلاحظ أيضا انقسام المساحة البيضاء الموجودة 

بداخل الصفحة إلى جزئين حيث سيتم وضع القائمة الخاصة بإدارة النظام 

فى الجزء الأيمن و محتويات الصفحات الأخرى فى الجزء الأيسر › ولكى 

نبداً فى تصميم صفحة إضافة البيانات قم بوضع نقطة الإدراج (المؤشر) فى 

الجزء الأيمن للمساحة البيضاء » ثم قم بالاتجاه إلى قائمة ٤]۵وم]‏ »› 

تم اختر box‏ )×ع) حیث سیتم إدراج مربع نص داخل الصفحة كما بالشكل 
التالى : 


Reset | Submit 


وبعد عمل الخطوة السابقة قم بوضع نقطة الإدراج (المؤشر) قبل 
مربع النص ثم قم بإدراج جدول مكون من عدد ۲ أعمدة و ٠١‏ صفوف على 
أن يكون عرض الجدول ٠٠٠‏ بكسل » ولقد قمنا بإدراج هذا الجدول للتنسيق 
فقط حيث سنقوم بوضع مربعات النص ( مربعات إدخال البيانات ) بداخل 
خلايا الجدول وسوف يظهر شكل الجدول بعد عملية الإدراج داخل الصفحة 
كما بالشكل التالى : 


الصفجة الرئيسية | إدارة النظام | صور المد عات | سجل الروار | انصل بنا 
EEF nm‏ 


جميع الحقوق محفوظهع لعام ا 


صميم : أحما فهمي مير 
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الفا الك هة ذاة الطاك الدافيكن 


ويمكنك تنسيق الألوان بالطريقة التى تم ذكرها مسبةا ليظهر الجدول 
منسقا كما بالشكل التالى : 


التى سيتم إدخالها فى آلجزء الأيمن من الجدول لتظهر كما بالشكل التالى : 


با الفاق الك وة ذاة الظام الذرنامرك 
وبعد كتابة وصف للبيانات كما بالشكل السابق قم بسحب مربع النص 
الذى قمنا بإدراجه فى أول خلية فى الجزء الأيسر من الجدول » ثم انتقل 
بمؤشر الإدراج إلى الخلية السفلى وقم بالاتجاه إلى قائمة ٤۲عوم]‏ › ثم اختر 
٠× 0×‏ حيث إنه بهذه الخطوة سيتم إدراج مربع نص آخر وهكذا قم 
بتكرار نفس الطريقة بجانب جميع بيانات الجدول عدا الخلية الخاصة 
بالصف فقم بإدراج ۸٥٥٤اںuاط‏ ,امہ (زر خیارات) بدلا من ×0ط ۲×٤‏ 
وحيث إننا سنقوم بتصميم صفحة إدخال بيانات الصفوف ( الأول والثانى 
والثالث ) فإننا سنحتاج إلى ثلاثة أزرار خيارات . ولعمل ذلك قم بتنفيذ 
اا ا ت ات موقا ال ل كا كن ا 
ETE‏ 


رقم الجلوس 
الصف rR‏ 


درجات المواد الدراسية 

اللفة العربية 

الرياضيات 
اللغة الانجليزية 

التريية الدينية 

)١ شاط(‎ 

شاط( ؟) 
المجموع الكلى 


والشكل السابق يوضح الجدول الذى قمنا بتصميمه بعد إدراج مربعات 
النص به ويمكنك التأكد من سلامة تطبيقك للمثال عن طريق الضغط بالزر 
الأيمن للماوس على أى مربع نص فاإذا ظهرت القائمة كما بالشكل التالى 
فإن ذلك يدل على سلامة تطبيقك . 


Cul 


Copy 


E HW # 


Paste 


Page Properties... 


Form PropertiEs... 


Form Field Properties, .. 


2 Hyperlink... 


1۳ 


ANAL EEN 
ل ال و اا‎ 
ضمن عناصر القائمة‎ orm field Properties & form Properties 
. حيث إن ظهورهما ضمن عناصر القائمة يدل على سلامة تطبيقك‎ 
ولاستكمال عملية التصميم لابد وأن نقوم بتغيير اسماء مربعات النص‎ 
حسب الوصقف المقابل لها . فعلى سبيل المثال مربع النص الأول سنقوم‎ 
بتغيير اسمه إلى مهم كما هو موجود بقاعدة البيانات وكذلك فى باقى‎ 
وسوف نتعرف أثناء كتابة الكود لماذا تم تسميتها بالاسماء‎ ٠ مربعات النص‎ 
الموجودة بقاعدة البيانات » ويمكنك تغيير اسماء مربعات النص عن طريق‎ 
form الضغط بالزر الأيمن للماوس على مربع النص ثم اختيار إ[عا؟‎ 
: حیث سیظهر مربع حوار کما بالشکل التالی‎ Prممe‎ 


Text Box Properties 


Hame: 
Initial 
wale: 


width in characters: 20 Tab arder: 


Password Field: ` Yes fF No 


Texk Direction: (None ¥ | 
SEYlE,,, Yalidakê,., Larırel 


فمن خلال الشكل السابق يمكنك تغيير اسم مربع النص أما بالنسبة 
أ button‏ tionمpه‏ الذى قمنا بإدراجه مقابل خلية الصف فيمكنك تغيير 
اسمه بنفس الطريقة السابقة » ولكن هل سألت نفسك عزيزى القارىء ماهى 
القيمة التى سوف يتم وضعها بقاعدة البيانات عند الضغط على أحد آزرار 
الخيارات الخاصة بالصف ؟ للإجابة على ذلك يمكننا القول بأن القيمة التى 
سيتم وضعها بقاعدة البيانات عند الضغط على أحد الأزرار هى التى سيتم 


1٤ 


بنا الفواقع آ[الكم وه ة دات الظان الدينامیكی 


وضعها أمام خانة مںإه الخاصة بكل زر و الموجودة بنفس مربع الحوار 
الذى نقوم بتغيير الاسم من خلاله وذلك كما بالشكل التالى : 


Upiion Button Froperties 


Group nare: saf 


Yale: ا‎ 


Initial stata: ê selected TÛ Not selected 


Tab order! | 
SEylE,,, Yalidake,., Lancel 


فالشكل السابق يوضح مربع الحوار الذى تم ظهوره عند الضغط على 
خصائص الزرالأول حيٿ تم وضع اسم الزر ( ۴ه ) كماتم وضع أمام 
خانة مں ]هر القيمة )١(‏ أى أنه عند الضغط على الزر الأول سيتم وضع 
بداخل قاعدة البيانات القيمة ١‏ وذلك يدل على أن هذا الطالب مقيد بالصف 
الأول ويمكنك استكمال باقى الأزرار بنفس الطريقة ولكن مع تغيير القيم 
حيث سيوضع بالزر الثانى القيمة (۲) والزر الثالث القيمة (۳) وبعد إجراء 
هذه الخطوة قم بكتابة الكلمة الإسترشادية ٠”‏ أمام كل زر ليظهر الصف 
بداخل الجدول كما بالشكل التالى : 


العف ٭ الأول ٦‏ الائ ٣‏ الثالث 
والشكل السابق يوضح الكلمات الإسترشادية الموجودة أمام الأزرار 


الثلاثة . 


الكلمة الإسترشادية هى الكلمة التى تدل على القيم التى سيتم إدخالها بقاعدة البيانات عند الضغط على الزر › 
حيث ماهى إلا كلمات تنبه القائم بعملية إدخال البيانات بأنه عند الضغط على الزر سيتم إدخال الكلمة الموجودة 
بجانب الزر أو قيمة تعنى الكلمة الموجودة أمام الزر وذلك يعتمد على القيم المعطاه لكل زر من قبل المبرمج 


1۵ 


بناء المواقع الالكتر وة ذات الطاب الديناميكى 

ويتبقى لنا الآن عزيزى القارىء تغيير اسم أزرار الضغط حيث 
يمكنك عمل ذلك بنفس الطريقة السابق ذكرها » حيث يوجد زر ادص طاو 
وهو الزر الخاص بإرسال البيانات قم بتغييره إلى (إدخال البيانات) وزر 
)٠561(‏ قم بتغييره إلى (تفريغ الحقول) ويمكنك أيضا عمل تغييرات أخرى 
فى شكل التصميم دون التقيد بماتم شرحه »› ولقد قمت بعمل تغيير آخر 
على التصميم حتى ظهر كما بالشكل التالى : 


الأول ۔ الثانى ۔ الثالث 


و إليك الكود الخاص بتصميم الجدول متضنا أكواد مربعات النص 
„<form method=" POST" action=""--WEBBOT-SELF--'">‏ 
<!--webbot bot="SaveResults'"" u-file="fpweb:///_private/form_results.csv'" S-‏ 


format="TEXT/CSV" s-label-fields="TRUE" --><div align="center"> 
<center> 
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ناء الفو افع آل الك وة دات الطاب الديتافيكى 


<table border="2"' cellpadding="0" cellspacing="0" style="border-collapse: 
collapse" bordercolor="#FFFFFF" width="517" dir="rtl]" id=" AutoNumber6" 
height="277"'> 
<tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center'"><bþ>&nbsp; pl 


<ل)/><(/> الطالب 
<td bgcolor="#DFECES8" width="246" height="27"'>‏ 
<p align="center'"><input type="text" name="name" size="40'"></td>‏ 
<tr> <tr>‏ 
<td bgcolor="#A3C4E6" width="267" height="27"‏ 
)pa;ضnbsp& align="center'"><bþ>‏ 
<ل)/><(/>الجلوس 
<td bgcolor="#DFECES8" width="246" height="27"'>‏ 
<p align="center'"><input type="text" name="num'"' size="40'"></td>‏ 
<tr> <tr>‏ 
<td bgcolor="#A3C4E6" width="267" height="27"‏ 
الصف align="center''><b>& nbsp;‏ 
</b></td>‏ 
<td bgcolor="#DFECES8" width="246" height="27'"'>‏ 
<p align="center'"><þ><input type="radio" value="1" name="saf"‏ 
llأوchecked>J‏ 
اlأilأyڪ>"'value='""'2 <input type="radio" name="saf'""‏ 
<input type="radio" name="saf" value="3'">dÛJI</b></td>‏ 
</tr> <tr>‏ 
<td bgcolor="#A3C4E6" width="513" height="28" colspan='"2'"">‏ 
درجاٽ lgklد <p align="center'"><font color='"'#000066'" size='""4'"'><bþ>& nbsp;‏ 
0n <>/ {d<‏ /><(/> الدراسیہ 
</tr> <tr>‏ 
<td bgcolor="#A3C4E6" width="267" height="28"‏ 
اiلdلغخé align="center''><b>&n bsp;‏ 
<ل)/><(/> العرييی 
<td bgcolor="#DFECES8" width="246" height="28'"'>‏ 
<p align="center'"><input type="text" name="ara" size="20"></td>‏ 
</tr> <tr>‏ 
<td bgcolor="#A3C4E6" width="267" height="28"‏ 
الرياضياٽت ;p:ۆ1n& align="center ''><b>‏ 


1۷ 


ناسک 


</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="math" size="20'"></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><b>&n bsp; éخغلdلiا‎ 
<ل)/><(/>الإنجلیزیہ‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="eng" size="20'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><b> &n bsp; vrييرتلا‎ 
<ل)/><(/>الدینیہ‎ 
<td bgcolor="#DFECES8" width="246" height='"28'"'> 
<p align="center'"><input type="text" name="deen" size="20'"></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><bþ>& nbsp; bli 
(1)</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="act1" size='"20'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><b>& nbsp; bli 
(2)</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="act2" size='"20'"></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"><b>&nbsp;عوaجdkl‎ 
<ل)/><(ط/> الكلى‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="tot" size="20'"></td> 
</tr> </table> </center> </div> 
<p align="center"><input type="submit" value=" ٽاناlیبٹا "اد خال‎ 


name=" B1"><input type="reset" value='"لوãحلا‎ ğıرÃî'"‎ name='"'B2'"></p> 
</form><p><br><br><br><br>&nbsp;</td> </tr> </table> </center> 
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بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 

ولعلك فهمت عزيزى القارىء أن هذه الصفحة خاصة بإدخال بيانات 
الصفوف (الأول والثانى والثالث) فقط أى أنه مطلوب عمل صفحة لإدخال 
بيانات الصفين الرابع والخامس وسوف نقوم بعمل هذه الصفحة بعد الإنتهاء 
من كتابة كود الصفحة الحالية حتى يمكننا حفظ الصفحة الحالية باسم آخر 

وإدخال التعديلات عليها التى تناسب صفحة الإدخال الأخرى . 

۳( كتابی كود الصفحم : 
قبل كتابة أى كود داخل الصفحة لابد أن نقوم بكتابة كود لعمل 
الإتصال بقاعدة البيانات وفى حقيقة الأمر تتعدد طرق الإتصال بقاعدة 
البيانات وطرق كتابة الأكواد وسوف نستخدم فى مشروعنا هذا أكثر من 
طريقة إتصال حتى يمكنك التعرف على طرق الإتصال المختلفة ويمكنك 
أيضا عمل مشروعك بكود إتصال واحد ولكن مع تغيير طريقة كتابة الكود 
التى تلائم طريقة الإتصال نفسها والآن اتجه إلى قائمة ]۴ » ثم اختر 
New‏ » ثم قم بالاتجاه إلى وضع 1۷1[ الخاص بكتابة الكود وقم بحذف 
جميع الأكواد الموجودة ثم قم بلصق كود الإتصال الآتی : 

<% 
Dim dsn 
Dim mycon 


dsn=" Provider=Microsoft.Jet.OLEDB.4.0;" & "Data Source=" & 
Server.MapPath("elmenzlawy_25.mdb") 


Set mycon=Server.CreateObject(" ADODB.Connection") 
mycon.connectionstring=dsn 

set rs=server.createobject("ADODB.Recordset'"") 
mycon.open 

>< 


والكود السابق هو كود الاتصال بقاعدة البيانات الذدى سوف نستخدمه 
فى هذه المرحلة ولقد قمنا بالاتصال بنظام وول وقد قمنا بكتابة اسم قاعدة 
البيانات التى قمنا بإنشائها فى آخر السطر الثانى من الكود . وبعد لصق 
الكود قم بحفظ هذه الصفحة فى نفس مجلد الصفحات الأخرى باسم 


. connection.asp 
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ف لواف الك هة ذا ك الاك الدافين 


وبعد القيام بكتابة كود الاتصال قم بفتح صفحة موه.uاء_ل‏ لج التى 
قمنا بتصميمها »› ثم قم بالدخول إلى وضع 1۷1[ الخاص بكتابة الكود ثم 
ھ اة اد آقالی اة الس 


<!--#include file="connection.asp'"" --> 

فالكود السابق عبارة عن استدعاء صفحة connection.asp‏ 

والموجود بها كود الاتصال بقاعدة البيانات حيث سيتم لصق الكود فى بداية 
الصفحة لیظهر كما بالشكل التالى : 


XHTHL+ 

<!--#include file="connection, azp" --—> 

HEAD: 

[TLE‏ / دار الوقع :1: إضافة نتاج الطلاب+411115 

HETA HTTP-ENUIY="Content-Type" COMIEIT="textfhtnl; charset=windovz-l4 50" 
tatyle fprolloreratylezAthover {color: #FFFTUO; text-decoration: underline; 
f aLFLE* 


«body background="iuajes pattern. Jif" link="#FFFFFF" rlink="#FFFFFF" alink=" 
READ: 


فالشكل السابق يوضح شكل الصفحة بعد القيام بلصق الكود الخاص 
بالاتصال بقاعدة البيانات وقبل البدء فى كتابة كود إضافة البيانات داخل 
قاعدة البيانات » فأحب أن أذكرك عزيزى القارىء بالأهمية القصوى للغة 
الخاصة بالصفحة حيث لابد من كتابة الكود الخاص الذى يجعل لغة الصفحة 
هى ( اللغة العربية ) ولعمل ذلك قم بالاتجاه إلى أعلى الصفحة ثم قم بكتابة 
الكود التالى : 

فالكود السابق هو الكود الخاص باعتماد اللغة العربية كلغة للصفحة 
وأيضا تأكد أن الرقم الموجود فى سطر اللغة هو 1256 حيث تجده فى أعلى 
الصفحة كما بالشكل التالى : 

ETA MTP-EUIY="Content-Type" COTENT="text/htul; charset=windowa-l450"; 

فبعد عمل الخطوات السابقة تأكد أنك قد خرجت من المشكلة التى 

يعانى منها الكثير وهى المشكلة الخاصة باللغة . 


۷٠ 


بنا الفواقع آل الك وهة دات الظاع الديناموكی 


والآن قم بالرجوع للوضع 1ه ۲ه" › ثم قم بالضغط بزر الماوس 
الأيمن على أحد مربعات النص المدرجة Form Properties رjتخ| pû‏ 
حیث سیظهر مربع حوار كما بالشكل التالى : 


Form Properties 


Where to store results 
fF Send to 


File nare: fpweb:ffY_privatefform_resulks, 5Y FOS! 


E-mail address: 
EE 
f send to other 
Form properties 
Form name: 


Target frame: 


Form Direction: None 


Gptions,.. | Advanced... | 


فالشكل السابق يوضح مربع حوار حيث يقوم بسؤالك ماهو المكان 
الذى ستقوم بتخزين البيانات به ؟ . فبما أننا نتعامل مع لغة ۸8۴ وبما أن 
عملية إرسال البيانات ستتم عن طريق صفحات الخادم النشط ۸8۶ فسوف 
يتم اختيار إعطاه ه† لمعء حيث إننا باختيارهذا الخيار كأننا قد قمنا بإخبار 
البرنامج أننا سنتعامل مع لغة ۸8۴ وسوف يظهر مربع الحوار كما بالشكل 
التالى : 


Form Properties 


Where to store results 
` Send to 


File name: 
E-mail address: 
` 5e 
fF Send to other Custom ISAPI, NSAPI, Cal, or ASP Srript 


Farr properties 
Form name: 


Target frarne: 


Form Direction: None w 


OpEiONS.,. | Advanced... | 
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الوا الك هة ذا الطاك الاين 


وبعد القيام بهذه الخطوة قم بالضغط على زر ٣١‏ همه من نفس مربع 
الحوار حيث سيظهر مربع حوار كما بالشكل التالى : 


Method; POST 


Encoding type: 
StylE,.. Caneel | 


ومن الشكل السابق تلاحظ وجود خانة ۸٥)10‏ حيث تختص هذه 
کے ی ا ن 
الخال فلن مسجل انال الصف الى ست نخدا إضاة اتقات 
هى مكه.t»uء.‏ له وكود ۸8۲ سيتم كتابته بنفس الصفحة ففى هذه الحالة 
سيتم كتابة اسم الصفحة مءه.ںاء. لله فى مقابل كلمة ۸)٥٥‏ وسیتم 
اختيار ومهم من القائمة المنسدلة وإليك الفرق بين الخيار وم و م : 


مع و امم تقريبا لهما نفس الهدف وهو إرسال المتغيرات من 
داخل النماذج (ئصإه]) ولكن يتلخص الفرق بينهما فى أنه عند اختيار 
طريقة الإرسال ه6 فسوف تلاحظ أن قيمة المتغيرات (كوصإه۴) مكشوفة 
فى عنوان المتصفح أما طريقة وم۴ تحافظ على سرية المعلومات (قيمة 
المتغيرات) بحيث تظهر مشفرة فى عنوان المتصفح › وبعد إجراء عملية 
التغيير سيظهر مربع الحوار كما بالشكل التالى : 


Options for Custom Form Handler 


Action: 


Method! POST ج‎ 
Encoding type: 


SEE... Lanzel 


۷Y 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 

وبعد عمل الخطوات السابقة قم بوضع نقطة الإدراج (المؤشر) تحت 

أزرار الضغط (ادخال البيانات » تفريغ الحقول) › ثم انتقل إلى وضع كتابة 
الكود وقم بلصق الكود التالى : 


<% 
if request.servervariables('"'REQ UEST_METHOD")="POST" then 
dim name,num,saf,ara,math,eng,deen,act1,act2,tot 


name=request.form("name'"") 

num=request.form('num'"") 

saf=request.form(""saf") 

ara=request.form(""ara") 

math=request.form("'math"") 

eng=request.form("eng") 

deen=request.form(""deen") 

act1=request.form("'act1") 

act2=request.form(""act2") 

tot=request.form("'tot'"") 

if name<>"" and num<>'""" and saf<>"" and ara<>'"" and math<>'""" and 
eng<>"" and deen®'"" and act1©'"" and act2<>"" and tot<>""" then 
rs.open "insert into 
result1(Name,Num,Saf, Ara, Math,Eng, Deen, Act1,Act2,Tot)values("&name&'"",'" 
&num&'"','"&saf&'"",'"&ara&'"','"&math&'""','"&eng&'""','"&deen&'"",'"&act1 
&'"''"&acl&'"','"&tot&'"")",mycon 

response.write '"<b><font col0r=b1uء>حlچiڊ />تم إضاف البيانات‎ ont >/ <" 
mycon.close 

else 

"<ط/> ٥١<‏ />من فضلك قم بملء جميع الحقول<>c010r=!ed response.write '"<b><font‏ 
end if‏ 

end if 

set mycon=nothing 

< 


واليك شرح الكود : 
فى البداية قمنا بكتابة شرط لكى يتم التأكد من أن طريقة اوم" هى 
الطريقة المستخدمة وذلك موضح بالكود على النحو التالى : 


ا اک اة الدافك 


بعد ذلك قمنا بتعريف المتغيرات الموجودة لدينا وذلك عن طريق كتابة 
اسماء ×0ط ×ه) الموجودة لدينا وذلك موضح بالكود على النحو التالى : 


بعد ذلك قمنا بالإعلام عن أنه يوجد لدينا مجموعة من المتغيرات لكى يتم 

text box jİ وھذا يعن‎ num=request. 0110)", u 11 "( المثال قمنا بكتابة‎ 

المسمى ب درام سوق يتم إدخال محتوياته فى الحقل صنم وهكذا مع کل 
مربعات اللص الموجودة وذلك موضح بالكود على النحر التالى : 

name=request.form("'name"") 

num=request.form("'num") 

saf=request.form(""saf") 

ara=request.form(""ara") 

math=request.form("'math"") 


eng=request.form("eng") 
deen=request.form("deen") 


act1=request.form("'act1") 
act2=request.form("'act2") 


tot=request.form("'tot'"") 

وبعد ذلك قمنا بكتابة كود يتضمن اسماء مربعات النص التى نرغب 

فى أن لايتم إهمالها عند قيام أصحاب الصلاحية بإدخال البيانات حيث يتم 

إجبارالقائم على إدخال البيانات على عدم إهمال هذه المربعات وفى مثالنا 

هذا قد قمنا بكتابة جميع مربعات النص كشرط لإتمام عملية إدخال البيانات 
وذلك موضح بالكود على النحو التالى : 


if name<>"" and num<>'"" and saf<>"" and ara<>"" and math<>'""" and 
eng<>""' and deen®'""' and act1<'"" and act2<>"" and tot<>'"""" then 


بالبيانات الإجبارية ؟. من المفترض أن يتم إدراج البيانات داخل الجدول 
الذى سيتم تحديده ثم كتابة عبارة تدل على أن عملية إدخال البيانات تمت 


V٤ 


أ افوا ف الك وة اة لكان الد افك 
سطور الكود فمن المفترض أن يتم كتابة عبارة تنبه المستخدم إلى ضرورة 
ق وک ی کک ا 


rs.open "insert into 
result1(Name,Num,Saf, Ara, Math,Eng, Deen, Act1,Act2,Tot)values("&name&'"",'" 
&num&'""','"&saf&'"",'"&ara&k'""','"&math&'""','"&eng&'""','"&deen&'"",'"&act1 
&" '"&acl&'""','"&tot&'""")",mycon 


response.write '"<b><font co10r=b1uء>حlچiڊ />تم إضاف البيانات‎ ont >/ <" 
mycon.close 

else 

"<ط/> ٥١<‏ />من فضلك قم بملء جميع الحقول<>c010r=r!ed response.write '"<b><font‏ 


ففى الكود السابق قمنا بتحديد الجدول ) (result1‏ والذى سيتم إدراج 
البيانات به › ثم قمنا بتحديد اسماء الحقول التى سيتم إدراج البيانات بها 
وكذلك قمنا بتحديد مربعات النص التى سيتم إستقبال البيانات منها . 

E E EOE 
: الاتصال وذلك موضح بالكود على النحو التالى‎ 


end if 
end if 


set mycon=nothing 
>< 


وبذلك نكون قد انتهينا من كتابة الكود الخاص بصفحة إضافة بيانات 
ونتائج طلاب ( الصفوف الأول والثانى والثالث ) ويمكنك اختبار عمل 
الصفحة عن طريق اتباع الخطوات التالية : 

. قم بنسخ المجلد الموجود به صفحات موقعنا‎ -١ 


۲ قم بالاتجاہ الی c‏ ع51۷ ۰ تم قم بفتح المجلد اںماعم] › تم قم بفتح 
المجلد ]٥٥۲‏ سسس ٠‏ تم قم بلصق المجلد الخاص بصفحات موقعك 


. WW W100 بداخل المجلد‎ 


۷۵ 


بناء المواقع الالكتر وة ذات الطاب الديناميكى 
ويمكنك تجربة الصفحة عن طريق كتابة الامتداد 
http://1ocalhost/ProjectBook\add stu.asp‏ 

حیث إن )مه8 ۵٥۲‏ ز٥۴۲‏ هو المجلد الذى يوجد به صفحات الموقع 
الخاص بى أى قم بكتابة الاسم الذى قمت باختياره للمجلد الخاص بصفحات 
موقعك أنت بدلا من ec)8 00k‏ ز٥۴‏ . 

وبعد القيام بالخطوات السابقة فسوف يتم فتح الصفحة وسوف يتم 
إدخال البيانات كما الشكل التالى : 


إضافة نتائج طلاب 


اولب آنگائی ‏ الان 


امد فچسي عبد المنعم عفبرة 
TE‏ 


© الأول © النانی © اثثائٹ 


۷1 


بنا الفواقع آل الك وهة دات الظاع الديداموكین 


وة انهان ادات کا اکل اسای ير العار الى قدا 
بكتابتها عند نجاح عملية إدخال البيانات حيث تظهر كما بالشكل التالى : 


إضافة نتائج طلاب 


الأفل ‏ الثاني ب الثالت 


اسم الطالب 
رقم الجلوس 
الضف © الأول © الئان © اثثالث 
درجات المواد الدراسية 
اللغة العريية 
الرياضيات 
اللغة الإنجليزية 
التربية الديئية 
نشاط ( )١‏ 
نشاط ( ۲) 
ا 


[ ادخال البيانات_) | تفريغ الحفول_] 
تم إضافة اليبانات بنجاح 
ويمكنك التأكد من ذلك عن طريق فتح قاعدة البيانات وفتح الجدول 
(1٤u1ءع)‏ حيث تجد البيانات قد تم إدخالها بالفعل وذلك كما بالشكل التالى : 


1 name num 54 aa mal eng gen a EE 
1 امد فھمی عبدالنسم رة‎ 4 E 100 100 50 50 25 25 250 
F | (AutoNumben) | 


و الآن عزيزى القارىء أعتقد أنك قادر على تصميم وبرمجة الصفحة 
ا ا ا الان رها اة 
n‏ ا ا یما ی ال و 
رات فى التسسور كذ الكرد ٠‏ رف قت تسم ها الق 
وكتابة الكود وقمت بتسميتها بالاسم (مءه.u1اء_44ه)‏ وإليك كود A۸8۲‏ 
الذى قمت بكتابته على النحو التالى : 


۷ 


اا اك ف اة الافكن 


<% 
if request.servervariables('"'REQ UEST_METHOD")="POST'" then 
dim name,num,saf,ara,math,eng,deen,olom,stu,act1,act2,tot 


name=request.form("'name'"") 

num=request.form("num'"") 

saf=request.form(""saf"") 

ara=request.form("ara") 

math=request.form("'math"") 

eng=request.form("eng") 

olom=request.form("'olom") 

stu=request.form("stu"") 

deen=request.form(""deen"") 

act1=request.form(""act1") 

act2=request.form("'act2") 

tot=request.form("'tot'"") 

if name<>"" and num<>'""" and saf<>"" and ara<>'"" and math<>'""" and 
eng<>"" and olom<>"" and stu<>"" and deen<>"'" and act1<>'"" and act{2<>'"" 
and tot<>"""" then 

rs.open "insert into 

result2(Name,Num,Saf, Ara,Math,Eng,Olom,stu,Deen, Act1,Act2, Tot)values("&n 
ame&'""','"&num&'""','"&saf&""','"&ara&'""','"&math&'""','"&eng&'"",'"&olom& 
""'""&stu&'"",'"&deen&'""','"&actl&""','"&act2&'"",'" &tot&'"")",mycon 
response.write '"<b><font co1l0r=b1uءe>حlچنiڊ />تم إضاف البيانات‎ ont >/ <" 
mycon.close 

else 

"<ط/> ٥١<‏ />من فضلك قم بملء جميع الحقول<>dء!=c010r response.write '"<bþ><font‏ 

end if 

end if 

set mycon=nothing 

< 


التق غ الكو 

EEE A SEO OTR 
بالصفين الرابع والخامس حيث تم إجراء تعديل فى السطر الثالت من الكود‎ 
حيث قمنا بتعريفه بالمتغيرات الجديدة حيث يوجد لدينا (»ء , ۳٥1ه) يمثلان‎ 
أعمدة (حقول) مضافة للجدول (12اءع) وقد قمنا بتخصيص مربعات‎ 


۷۸ 


ا افو افع الك وة اة الطان الديافيكى 


النص والإعلام عن المتغيرين الجديدين بنفس الطريقة التى تم شرحها مسبقا 
وكذلك قمنا باعتبار القيم التى سيتم إدخالها فى مربعات النص المضافة قيم 
إجبارية كما فى السطر السادس عشر من الكود وكذلك تم تعديل اسم الجدول 
الذى سيتم إضافة البيانات بداخله إلى الجدول (2٤1ںوه)‏ وكذلك تم إضافة 
N ELÎ‏ 

ولقد تم التعديل أيضاً فى كود 11[ الخاص بتصميم الجدول لیلائم 
الصفحة الخاصة ببيانات الصفين الرابع والخامس وإليك كود الجدول 
على النحو التالى : 


</table> 
</center> 
</div> 
<form method=" POST" action="add_stu1l.asp'"'> 
<div align="center'"> 
<center> 
<table border="2"' cellpadding="0" cellspacing="0" style="border-collapse: 
collapse" bordercolor="#FFFFFF" width="517" dir="rtl]" id=" AutoNumber6" 
height='"277'"'> 
<tr> 
<td bgcolor="#A3C4E6" width="513" height="27" align="center" 
colspan='""2''> 
<p align="center'"><font color="#000066" size="4'"><bþ>&nbsp; 
>spP21 141 عg=" الأساسيت للطالب<"عء-2۲‎ تانايبلا>/sمan<>/ط<>/‎ fon t< >/t d< 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center'"><bþ>&nbsp; pl 
<ل)/><(/> الطالب‎ 
<td bgcolor="#DFECES8" width="246" height="27"'> 
<p align="center'""'><input type="text" name="name" size="40'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center'"><b> &nbspص;‎ pa) 
<ل)/><(/>الجلوس‎ 
<td bgcolor="#DFECES8" width="246" height="27"'> 


۷۹ 


اا ااك ةة ك اة الاك 


<p align="center'"><input type="text" name="num'"" size="40'"></td> 
</tr> 
<tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center''><b>&nۆbspص; الصف‎ 
</b></td> 
<td bgcolor="#DFECES8" width="246" height="27"'> 
<p align="center'"'><b><input type="radio" value="4" name="saf" 
checked> لري‎ 
<input type="radio" name=""saf"" value='"5'"'>سمlëخlا‎ </b></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="513" height="28" colspan='"2'""> 
<p align="center'"><font color='"'#000066'" size='""4''><bþ>& nbsp; داgkl درجاٽ‎ 
/><ط/> الدراسیہ‎ 10n t< >/ {d< 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><b>&nbspص;éخغلdلiا‎ 
<ل)/><(/> العرييی‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="ara" size="'20"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center ''><b> &1ۆ:p۲; الرياضياٽ‎ 
</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="math" size="20'"'></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><b>&n bsp; éخغلdلiا‎ 
<ل)/><(/>الإنجلیزیہ‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="eng" size="20'"></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width='"267" height="28" align="center'"'> 
<span lang="ar-eg'"><bþ>pglall</b></span></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="olom" size="20'"></td> 


۰ 


با الفة افع ال الك وة دات الطاب الدينافيكى 


</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" align="center'"'> 
<span lang=" ar-eg'"><b>jvacامتجإلا‎ تاساردلا>/b<>/spa‎ n< >/ d< 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="stu" size='"20'"></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><b> & nbsp; vييرتلا‎ 
<ل)/><(ط/>الدینیړ‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="deen" size="20'"'></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><b>& nbsp; bli 
(1)</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="act1" size="20'"></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><b>& nbsp; bli 
(2)</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="act2" size='"20'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"><b>&nbsp;عوaجdkl‎ 
<ل)/><(ط/> اللكلى‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"><input type="text" name="tot" size="20'"></td> 
</tr> <lItable> </center> </div> 
<p align="center"><input type="submit" value=" "اد خال اٹبیاناٽ‎ 


name=" B1"><input type=""reset" value=" لaãحئنا‎ خيرkî'"‎ name=" B2'"><br> 


<br> 


۸۱ 


ف اغراف الك هة ذاة الاك الاين 


التعليق على الكود : 

نلاحظ من خلال الكود السابق أننا قد قمنا بتغيير ال ۸)1٥‏ الخاص 
بالصفحة من (مpءه.uء_لله)‏ إلى (مءه.u1†ء_dله)‏ حيث إن الاسم 
الجديد هو الاسم الخاص بصفحة إضافة بيانات الصفين الرابع والخامس 
وكما نلاحظ أيضا تغيير القيم التى سوف يتم إدخالها داخل قاعدة البيانات 
عند اختيار أزرار وط «هنامه حيث قمنا بكتابة القيمة "4" » حيث تدل 
هذه القيمة على أن الطالب الذى سوف يتم إدخال بياناته فى الصف الرابع 
وكذلك قمنا بكتابة القيمة "5" » حيث تدل هذه القيمة على أن الطالب الذى 
سوف يتم إدخال بياناته فى الصف الخامس ونلاحظ أيضا أننا قد قمنا بإضافة 
صفين فى الجدول وكذلك مربعات نص لكل صقف منهما وهما يخصان 
مدخلات مادتى العلوم والدراسات الإجتماعية . 


ثانياً: تصصيم صفحة سجل الزوار وبرمجتها: 


إن صفحة سجل الزوار ماهى إلا عبارة عن صفحة تمكن الزائر من 
التعليق وإبداء رأيه فى الموقع وكذلك تقييمه للموقع وحتى نتمكن من عمل 
سجل للزوار فإننا بحاجة إلى جدول داخل قاعدة البيانات حتى يتم تخزين 
التعليقات الخاصه بالزوار بداخله وسوف نقوم بإنشاء جدول داخل قاعدة 
البيانات بنفس الطريقة السابق ذكرها ويمكنك إنشاء الجدول بداخله أعمدة 
كما بالشكل التالى : 


EB vis book : Table 


I Field Name 
i Autaflumber ترفیم تلقاثي‎ 
| |add_date DateTime وفت تاريخ إضافة التحليفق‎ 


| |namë Text الإأستر‎ 

البريد الإلتتنرضى Em Text‏ 
طريقة الإستدلال على موفعنا |_jmethod Text‏ 
تقبيت الموقح |__jop_mwebsite Text‏ 

|_Îcomrment Memo التحليف‎ 


۸۲ 


را فاق أا فة الان لاسکی 
ف الاق درک الضرل الان فا ا اكل قاع اعات 
حتى نتمكن من إضافة تعليقات الزوار بداخله ويمكنك إنشاء نفس الجدول 
بنفس الأعمدة وكذلك نوع بيانات الأعمدة كما بالشكل السابق. 
ولكن هل سألت نفسك عزيزى القارىء من الذى سيقوم بتسجيل وقت 
وتاريخ كتابة التعليق فى العمود (عم)دل_44ه) ؟ بالطبع لن يقوم الزائر 
قل اک وا ف ت عا ای اا کی بے س فی 
تلقائى للوقت والتاريخ قم باتباع الخطوات التالية : 
-١‏ قم بتحديد الحقل (عtهل )4dd_‏ . 
- اتجه إلى خصائص الحقل الموجودة فى أسفل مربع الحوار . 
۳ قم بکتابة الدالة ( () wہہ)‏ امام Default va ue‏ كما بالشکل 
التالى : 


Default Yalye =o) 
: ملحوظة‎ 


معنى كتابة الدالة ( 0 سمم=)هو إدراج الوقت والتاريخ الحالى . 

بعد القيام بإنشاء الجدول وعمل الخطوات السابقة قم بحفظه باسم 
( 00kط_v1s)‏ وبعد ذلك قم بفتح برنامج f٥٤ ۴۵٥‏ ثم قم باستدعاء حد 
ااا ال ا ان ا ا ن ا دا 
القوائم الجانبية ثم قم بعمل حفظ باسم للصفحة وقم بتسميتها موج.درهء_ لج 
ثم قم بتفريغ محتويات الصفحة وقم بتصميم نموذج لكى يتم إضافة التعليقات 
والملاحظات من خلاله حيث يمكنك تصميمه بنفس الطرق التى تم ذكرها 
مسبقا » وإليك الشكل المقترح للنموذج كما بالشكل التالى : 


۸۲ 


الوا الك هة ذاة الطاة الصاضخن 


مرحبأ بك فى سجل الزوار / 
الحقول الموجود أمامها علامة (*) هى حقول إجبارية 


الاسم : * 
البريد الالكتروئى : * 
طريقة الاستدلال على موقعنا من اذز سة ا[ 
تقنيم الموقن مصتاز ٤‏ جيذ ٤‏ ضعیف 
التعليق e‏ 
ا3 


وإليك الكود الخاص بتصميم الشكل السابق على النحو التالى : 


<center> 
<table border="0" cellpadding="0" cellspacing="0" style="border-collapse: 
collapse" bordercolor="#111111" width="646" dir="rtl" id=" AutoNumber7" 
background="images/back3.gif" height='"107''> 
<tr> 
<td width="433" height="107" valign="top'"> 
<p align="center'"><bþ><font color="#000066" size="6'"'><þbr> 
</font><font color="#000066" style=""font-size: مرحبأ بك فى سجل<>" )م28‎ 
الزوار‎ >/ font > font color="#000066"' size=" 6" <>>br< 
<l/font<<font size="4" color="#000066'"><br> 


</font><font size='""4'">yمlلlع الحقول الموجود أمامھا‎ )> n٤ 


color="#FF0000'">*</font>) 
/>ھی حقول إجباریہٰ‎ ٤٥۸< <م/><(ط/>‎ 
<p align="center">&nbsp;</td> 
<td width="211" valign="middle" height='"107'"'> 
<p align="center'""> 
<img border="0" src="images/add_com.jpg" width="78" height="77'"></td> 
</tr> </table> </center></div> 
<form method="POST" action="add_com.asp'""> 
<div align="center'"> 
<center> 


۸٤ 


ناء الفة افع آل الك وة دات الطاب الديتافيكى 


<table border="1"' cellpadding="0" cellspacing="0"" style="border-collapse: 
collapse" bordercolor="#FFFFFF" width="651" dir="rtl]" id=" AutoNumber8" 
height='"94"'> 
<tr> 
<td width="211" height="16'" bgcolor="#A3C4E6'"><b>&nbsp; pull : 
<font color="#FF0000'">*</font></b></td> 
<td width="438'" height="16" bgcolor="#DFECES8'"'> 
<input type="text" name="name" size="61" style="color: #000080" 
dir="rt]'"></td> 
<ltr> <tr> 
<td width="211" height="19" bgcolor="#A3C4E6'"'><b>&n bsp; البريد‎ 
الإلكترونى‎ : >on coاor="#FF0000'"'<*>/font<</‎ b> >/td> 
<td width="438" height="19" bgcolor="#DFECES8"'> 
<input type="text" name="email"" size="61" style="color: #000080" 
dir="ltr'"></td> 
<tr> <tr> 
<td width="211" height="21" bgcolor="#A3C4E6'"><b>&nbsp;&nbsp; 
طريقہ الإستدلال‎ 
على موقعنا‎ :>/(<>/)d< 
<td width="438" height="21" bgcolor="#DFECES8'"'> 
<select size="1" name="method" style="color: #000080''> 
<option value="rwرnkl‎ jم‎ '" selected><vrwردnkلا‎ jنم></option>‎ 
>هpاi0١‎ ۷21 uء=" مامه />وزارة الترييم والتعليم>وزارة التربي والتعليم‎ «< 
>0 p)i0 1< />الإدارة التعلیمي‎ op tion< 


ھا 


<option value=" />محرك بحث>محرك بګٺ‎ option < 


<option value=" éرخ‡خİ<aرخİ</option>‎ 
</select><</td> 
<tr> <tr> 
<td width="211" height="19" bgcolor="#A3C4E6'"><b>&n bsp; عقو٠۹ تقييم‎ 
:</b></td> 
<td width="438" height="19'" bgcolor="#DFECE8'"><b> 
<font color='"#000080''> 
<input type="radio" value=" jüan" checked 
name="op_website">jlan<input type="radio" name="op_website" 
value=" جد“< ج‎ <input type="radio" name="op_website" 
۷a1 ue='"' />ضعیف>ضعیف‎ 10n >/b<>/) d< 
<tr> <tr> 
<td width="211" height="19" bgcolor="#A3C4E6" 
valign="middle'"><b>&nbsp; 
التعلیيق‎ :>font coاor="#FF0000'"'<*>/font<</‎ b> </td> 


۸۵ 


اة اتافکن 


<td width="438'" height="19'" bgcolor="#DFECES8'"'> 
<textarea rows="9" name="comment" cols="49'" style="color: #000080" 
dir="rt]"></textarea></td> 
</tr> <I/table> </center> </div> 
<p align="center'""><input type="submit" value=" qqãوتلاl ضفضز‎ 


name=" B1"><input type="reset" value=" لوقaحلا "'تفريخ‎ nam e='"' B2'"<>/ p< 


</form><p><br> 
&nbsp;<p dir="'rt]" style="text-indent: 19px; line-height: 200%;" 
align="center">&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</td> </tr> <tr> 
<td width="226" valign="top" height="13" bgcolor="#FFFFFF'"> 
&nbsp;</td> 
<td width="751" height="13" bgcolor="#FFFFFF" valign="top'"'> 
&nbsp;</td> 
</tr> 
</table> 
</center> 


فى النموذج السابق الخاص بسجل E E‏ 
منسدلة داخل التصميم وقد تم إدراج هذہ القائمة عن طریق قائمة ٤]٥یم]‏ ثم 
اختيار الأمر ×0ط «سهل-مهإ5 حيث يتم إدراج قائمة منسدلة خالية 
ويمكنك كتابة محتويات القائمة عن طريق الضغط بالزرالأيمن للماوس ثم 
اختیار sعtاerمProp form ۴e1d4‏ فسوف یظھر مربع حوار قم بالضغط 
على زر ل۸ من خلال مربع الحوار فسوف يظهر مربع حوار آخر يمكنك 
من خلال مربع النص الأول الموجود بمربع الحوار كتابة الكلمة المراد 
ظهور ها بالقائمة ثم من خلال مربع النص التانى الموجود بنفس مربع 
الحوار يمكنك كتابة النص الذى سيتم إدخاله بقاعدة البيانات عند اختيار 
هذا الخيار من القائمة المنسدلة وبالطريقة نفسها يمكنك إضافة خيارات 
أخر اة 


۸٦ 


اء لفو افع الك وة دات الطاب الدينافيكى 


۔ کتابرٰ کود ۸8۶۴ : 

إن طريقة كتابة الكود الخاص بإضافة بيانات سجل الزوار هى نفس 
طريفة كقاة الكر د الخاضن باضافة ناتاو در جات الطادب و يمكتك تة الكرد 
ا ا و ار ی 


<% 
if request.servervariables("REQUEST_METHOD")="POST" then 
dim name,email,method,op_website,comment 


name=request.form('name") 

email=request.form("'email") 

method=request.form(""' method") 

op_website=request.form("'op_website'"") 

comment=request.form("comment'") 

if name<>"" and email<>"" and comment<>'"""" then 

rs.open""insert into 
vis_book(Name,Email,method,Op_website,Comment)values("&name&'""",'"&em 
ail&k'"",'" &method&'""",'" &op_website&'"""','" &comment&'""")",mycon 


response.write "<b><font color=b1ue>حlچiڊ إضاف~ توقيعك‎ مت>/1on<>/‎ <" 


mycon.close 

else 

من فضلك تأكد ملء الحقول الموجود أمامها علامz response.write "<b><font co1l0r=red>‏ 
"< /><)on/>حمراء‏ 

end if 

end if 

set mycon=nothing 

>< 


أذكرك عزيز ى القارىء بكتابة الجملة الخاصة باستدعاء كود الاتصال 
بقاعدة البيانات . 

وبعد القيام بعمل الصفحة الخاصة بإضافة ملاحظات وتعليقات الزوار 
فنلاحظ أننا بحاجة إلى عمل صفحة لعرض تعليقات وملاحظات الزوار 
حتى تصبح متاحة لزوار الموقع للاطلاع عليهاوهذا ما سيتم تناوله 
بالتفصيل فى الفصل القادم . 


۸۷ 


القصل الحاسس 
إنشاء صفحات البحث المتقدم 
وصفحات عرض البيانات 


بنا الفة افع ال الك وة دات الطان الديتافيكى 


انشاء صفحات البحث المتقدم وصفجات عرض البيانات 
أولاً : إنشاء صفحات البحث المتقدم لطلاب الصفوف [ الأول والثانى 
والثالث ]: 
فى الفصل السابق تم عمل صفحة لإضافة نتائج طلاب الصفوف 
(الأول والتانى والثالث) داخل قاعدة البيانات والآن أصبحنا بحاجة إلى 
فة رضن العاتات المسكة دال عة العاقات و كن هه ال ةة 


ن 


E O‏ ف الوت و ذلك بره 
النحت بر فلوسن الطالت و كذلك يمكته النخت بائ الطالت وعد اختيار 
أى طريقة من الطرق السابق ذكرها ستظهر صفحة تحتوى على نتائج 
البلحث ولكن يوجد بها أزرار خاصة بالتعديل والحذف والطباعة وحتى 
نتمكن من عمل ذلك لابد أولا أن نقوم بعمل صفحة خاصة بها محرك للبحث 
المتقدم وذلك حتى يتمكن مدير الموقع من اختيار طريقة البحث التى تناسبه 
وسوف نقوم بتسمية هذه الصفحة بالاسم مئه. ew‏ v1_طء۲هعء‏ ويمكنك 
عمل هذه الصفحة بنفس الطرق السابق ذكرها حيث سنقوم بفتح أى صفحة 
أخرى من الصفحات التى تم تصميمها مسبقا ويفضل أن تكون صفحة 
من الصفحات التى لا تحتوى على القوائم الجانبية الموجودة بالموقع 
وبعد ذلك سيتم عمل حفظ بالاسم eW .48p‏ 1_۷1١٤۲همء‏ وبعد أن يتم حفظ 
الصفحة قم بالاتجاہ إلی قائمة ۲۲٥وہ]‏ › ثم اختر الأمر ۴٥۲٥‏ › ثم اختر 
×0ط down‏ -مr0p(‏ (القائمة المنسدلة) فستجد الصفحة كما بالشكل التالى : 


۸۹ 


ف اغراف الك هة ذاة الاك الدافين 


Reset | Submit ٣ 


وبعد القيام بعمل الخطوة السابقة قم بوضع المؤشر الخاص بالماوس 
بعد ×0 Drop - down‏ › ثم قم بإدراج ×80 1٥×‏ حیث سیظھر 
القضش کنا ناکل التائ 


Reset | Submit EE 


A a E E, 
زمرت الف ا دة را اف افا اك كن مر الا‎ 
من اختيار طريقة البحث التى تناسبه وقد قمنا بإدراج مربع النلص لكى يقوم‎ 
ور ا كات انه ورد اقا مل الكو تاا‎ 
اة طر ن النحك دال اتقات الت نة انط ر هة ات ف كرما سا‎ 
)١هصدع( حيث سنقوم بكتابة (البحث بالاسم) وسنقوم بكتابة حقل البحث‎ 
: كما بالشکل التالى‎ 


Modify Choice 


Choice: 


البحث بالاسم] 


IW Specify Yalue!: 


name 


Initial state: 
(# selected 
` Mot selected 


با الغو اق الك وة دة الان الا سى 
وكذلك سنقوم بكتابة طريقتين أخرتين وهما ( البحث بالصف والبحث 
( ص ںہ , Saf‏ ) كما بالشکل التالی : 


Modify Choice 
Choice: 

البخت بالصف|ً 
IW specify alus!‏ 
saf‏ 


Initial state: 
f“ Selected 
f* Mok selected 


cra | 


Modify Choice 


Lhaice!: 


البحث برقم الجلوس]ً 


IW Specify Value! 
num 


Initial state: 
` selected 
(* Hot selected 


للنموذج الخاص بالقائمة المنسدلة حيث سيظهر مربع الحوار الخاص 
بالقائمة المنسدلة كما بالشكل التالى : 


۹۱ 


فا الوا الك هة ذا الاك الخافيكن 


س 
Drop-Down Box Properties 8‏ 
Name: [kind‏ 
Choice | Selected | Value Add...‏ 
Es name‏ البخث بالأست 
No saf Modify...‏ البخث بالضف 
lo num‏ البخث برقم الجلوس 
Remove‏ 
Move Up‏ 
Moye Down‏ 
Height: Allow multiple selections: FF Yes‏ 
f No‏ 


Tab order: 


Direction: Right-to-left +] 

Styl... | Yalidate,.. | Zancel 
وبعد القيام بعمل الخطوات السابقة قم بالاتجاه إلى ×80 ×16 مربع‎ 
النص » ثم قم بتسميته ط١٠إجعء وقم بكتابة القيمة <%=1١4۲عء%> ليظهر‎ 

فرع آلخرار گنا اگل لقال : 


Text Box Properties 


Name: [search 


Initial 
wale: 


width in characters: 20 Tab order: | 


[et=searchat = 


Password field: f Yes fF Mo 


Text Direction: Right-to-left ¥ 
Style... Yalidake... Lanrzel 


وبعد الانتهاء من تسمية وكتابة قيمة ×0ط 1٠×‏ (مريبع النص) 
قم بتغيير اسم زر ٤1ط‏ طاں؟ إلى اسم (عرض البيانات) وقم بإزالة زر tمومR‏ 
> ثم قم بالضغط بزر الماوس الأیمن على آی أحد مربعات النص التی تم 
إدراجھا › ثم اختر ءعنااeمpمP ۴١۳‏ حیث سیظھر مربع حوار قم 
باختیار طا ه† لممS‏ حيث إننا باختيار هذا الخيار كأننا قد قمنا بإخبار 
الرتامع افا تقال مع له A9‏ ورسرف بر مرم الحرار كا الكل 
التالى ٠‏ 


۹۲ 


بنا الفواقع آل الك وة دات الظا الدينامیكی 


Form Properties 


Where to store results 
` Send ta 


File name: 
E-mail address: 
5 
f Send ta other Lustorn ISAPI, NSAPTI, Lal, or ASP Script 


Form properties 
Form name: 


Target frame: 


Form Direction: fone ¥ 
Gptions,.., | Advanced... | Cancel 


وبعد القيام بهذه الخطوة قم بالضغط على زر ١٥0ذامه‏ من نفس مربع 
الخر ار ف اع رع هح ار م اه ر وواه 
اا ا ا اھا کے ت رکو ا ما اک ر د 
الحوار وسوف نقوم بتسمية هذه الصفحة بالاسم مئه.uاء_س0طء‏ ولقد قمنا 
بکتابة اسم هذہ الصفحة فی ۸٥1٥٥۸‏ لان آکراد ۸8۶۴ سیتم کتابتھا فی هذہ 
الصفحة و بعد كتابة الاسم سيظهر مربع الحوار كما بالشكل التالى : 


ج 

Options for Custom Form Handler | ت‎ ۴ 
Action: [show_stu.asp 
Enna 


Encoding ype: َ 
SEylE.,. Lancel 


وبعد الانتهاء من الخطوات السابقة قم بكتابة كلمات استرشادية بجانب 
النماذج وذلك كما بالشكل التالى : 


۹۲ 


الوا الك هة ذاة الكطاة الاين 
وإليك كود التصميم على النحو التالى : 


<form method=" POST" action="show_stu.asp'"> 
<p align="center'""><font color='"'#000080'"'<>ط<ثحعبلا اختر طريق‎ 
<select size="1" name="kind" dir="rtl]" style="color: #000080''> 
<option value="name'"" selected>pwںlڊ‎ >çJl</option> 
<option value='"'saf'"> لصف‎ ûحبلJl>/option>‎ 


<option value=" 11 '"> />البحث برقم الجلوس‎ 0p اi0n<‎ 
>/ءع1٤٥٤< ادخل کلمات البحٹث‎ >inpPuاt‎ type="text" name="search" size="20" 


— 


value="<%=search%>" dir="rtl"> <input type="submit" value=" "عرض البیاناٽ‎ 


name='" B1"></b></font><</p> 
</form> 


بتصميم الصفحة التى سيتم من خلالها عرض نتائج البحث (عرض البيانات) 
ولعمل ذلك قم بحفظ الصفحة باسم آخر وهو الاسم (spئshow_stu.a‏ ( 
جدول لعرض البيانات كما بالشكل التالى : 


تعدیل حذف طباعة 


والشكل السابق يوضح الجدول الذى تم إدراجه وتنسيقه حتى يتم إظهار 
نتائج البحث به ونلاحظ من الشكل السابق أن نتائج البحث ستتضمن بعض 
البيانات الأساسية فقط ولكن عند الضغط على زر طباعة الذى سنقوم بتصميم 
الصفحة الخاصه به لاحقاً فسوف يتم عرض جميع البيانات ويلاحظ أيضاً من 
الشكل السابق أن الجدول مكون من صفين › الصف الاول يحتوى على البيان 
والصف الثانى يحتوى على خلايا فار غه حيث سيتم إظهار نتائج البحث بها تباع 
ونلاحظ أيضا وجود ستة أعمدة تم تخصيص الثلاثة أعمدة الأولى لعرض اسم 
الطالب ورقم الجلوس الخاص به وكذلك الصف المقيد به أما الثلاثة أعمدة 
الأخرى قمنا بكتابة كلمات ( تعديل - حذف - طباعة ) وذلك لعمل روابط 
للصفحات الخاصة بالتعديل والحذف والطباعة والتى سيتم تصميمها فى الفصل 
القادم ولكن فى هذا الفصل سيتم كتابة عناوين الروابط الخاصة بهما فقط . 


۹٤ 


اء لفو افع الك وة اة الطان الديتافيكى 


والآن بعد أن انتهينا من تصميم الجدول الذى سيتم عرض البيانات 
بداخله فسوف نقوم بكتابة كود ۸8۴ الخاص بصفحة عرض النتائج 
وسيكون الكود على مرحلتين والمرحلة الأولى هى : 


dim recno,kind,search 

kind=request.form("" kind") 

search=request.form(""search'") 

> 

<% 
if request.servervariables("REQUEST_METHOD")="POST" then 

if search='"" then 
response.write "<center><font col0r=red> تاlملڪ من فضلك قم بإدخال‎ 

ثحبلا>/font<>/center>"‎ 


else 
set rsrec=server.createobject("ADODB.Recordset"") 
rsrec.open "select * from result1 where "&kind&"' like 
'%"&search&'"%' order by Name asc",mycon 
recno=0 
do while not rsrec.eof 
recno=recno+1 
rsrec.movenext 
loop 
rsrec.close 
set rsrec=nothing 
if recno < 1 then 


response.write "<center><b><font size='""'"4'"" color= black> ùحڊ‎ چجئlتن لایوجد‎ 
gùa</font" & " " & "<font size=""4"" color= red>" & search & "</font>" & " " 
& "<font size='""'"4'"" color= black> الرجاء اختيار طريق٬ بحث‎ 
ىرخآأ>/font<>/b<>/center>"‎ 


else 

if recno >= 1 then 

response.write "<center><p><font size="""4""" color= black> عدد النتائج التي تحتوي‎ 
"على‎ & " '" & ">font size="'"4"'"' colاor=‎ red<" & search & ">/font>" & " " & 
"هي"‎ & " " & recno & " " & سجل"‎ '" & '">/font<>/b<>>/ center>" 

< 


۹۵ 


EA AN‏ ا 
شرح كود المرحلة الأولى : 

فى بداية الكود قمنا بتعريف المتغيرات الموجودة عندنا حيث قمنا 
بكتابة أسماء ۴‰( النماذج ) الموجودة لدينا وذلك موضح بالكود 
على النحو التالى : 

ق د ااك لطاع اهت ا 
الذى دفعنا للقيام بكتابة القيم ( fهة؟‏ , سام ,عمصهم) فى القيم الخاصة 
بخيارات القائمة المنسدلة ؟ وأيضا لماذا قمنا بتسمية النموذج بالاسم لما ؟ 
ولقد قمنا بعمل ذلك لأننا نريد عند الضغط على الخيار (البحث بالاسم) أن 
يتم إجراء عملية البحث فى الحقل (عصهم) وكذلك عند اختيار الخيار 
(البحث بالصف) سيتم البحث فى الحقل ( fه؟)‏ وكذلك أيضا عند اختيار 
الخيار (البحث برقم الجلوس) سيتم البحث فى الحقل (صسuم)‏ ولقد قمنا 
و KL a a ag a” aa‏ 
وبذلك نقصد أنه عند الضغط على النموذج الخاص بالاسم لم سيكون 
E E ONA E E AL‏ 
القيمة الخاصة بكل اختيار من الخيارات الموجودة على اعتبار أنه الحقل 
الذى سيتم إجراء عملية البحث به ولذلك قمنا بالإعلام عن وجود المتغير 
ا ليتم أخذ قيمته وذلك بكتابة الكود التالى : 

ونلاحظ أيضا فى الكود السابق أننا قد قمنا بتسمية ×0ط 1٥×‏ بالاسم 
search‏ وكذلك قمنا بكتابة <%=1ء4۲عو > كقيمة افتراضية لهذا المربع 
فا ی و و ا کا کرد کی بان عة کت قارف 
الحروف (<%=طءإهaعء%>‏ ) الموجودة بمربع النص 1ء4٥6‏ ولذلك 
قد قمنا بكتابة الكود التالى : 


search=request.form(""search'") 


۹1 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
N KS‏ 
بأنه إذا كان مربع النص (طءإهمء) فارغ سيقوم بكتابة عبارة" من فضلك 

قم قادال لمات الك ١‏ ورذلك مر ضح دالكره لى النخر التال* 


if search='"""" then 
response.write "<center><font col0r=red> من فضلك قم بإدخال کلمت‎ 


font >/center>"‏ />البحث 


وبعد ذلك قمنا باستكمال الكود لنخبر بأنه إذا كان مربع النص 
(1ءإهعء) غير فارع سيقوم بتنفيذ جملة ال ءع[عء حيث نقول فى هذه 
الجملة ( قم بفتح الجدول 1[ ںوءمع ثم قم بتحديد الحقل الذى تم اختياره من 
النموذج لماع ثم قم بتحديد الكلمات التى تشبه الكلمات الموجودة بالنموذج 
طearcء‏ من داخل هذا الحقل ) ويلاحظ كتابة كلمة م)ز] وذلك حتى يتم 
البحث عن قيم تشبه القيمة التى تم أخذها من المتغير أى لا يشترط التساوى 
بين القيمة التى تم آخذها من المتغير والقيمة التى سيتم البحث عنها داخل 
الحقل » ولكن بعد كتابة كلمة م)] لابد من إدخال علامة % ما بين 
العلامات (") ليظهر الشرط كالتالى : 

ويمكنك أيضا كتابة ( = ) بدلا من م )11 وذلك حتی تشترط تساوى 
القيمة التى تم أخذها من المتغير مع القيمة الموجودة فى الحقل ولكن بدون 
كتابة علامات % . وبعد ذلك قمنا بإخباره أن البيانات الناتجة عن عملية 
البحث سيتم ترتييها تصاعديا وذلك مستتندا إلى البيانات الموجودة بالحقل 
Name‏ وقد جاء كود {cم]عمS‏ وكذلك التر تيب الأتصاعدى للبيانات 
بسطورالكود على النحو التالى : 


rsrec.open "select * from result1 where "&kind&" like '%"&search&'"%' order 
by Name asc",mycon 


اف اا فة 6 فاا الاك 


ملحوظہة : 
عند كتابة (عوج) يعنى ترتيب البيانات تصاعدى ولكن عند كتابة 
(ءءەل) فذلك یعنی ترتیب البیانات تنازلى . 


Ya 
: 00 شرح الحلق)‎ 


الحلقة (00) حلقة صيغتها something ( 1] 0p‏ ) 00 فالسطر do‏ 
while not rs.e0f‏ یعنى (00) ابداً حلقة ( eازطس‏ ) ما دامت ۰ (٤0ہ)‏ لم 
تكون وع نهاية الملف » و گم اختصاراً ل ( ع11 ۴ه مء ) أى أن الحلقة 
ستستمر فى التنفيذ ( الحلقة تبدأً ب 5٥‏ وتنتهى بكلمة م0مم[ ) مادام الشرط 
صحیحا وبمجرد عدم تحقق الشرط لن یتم تنفیذ مابین 0 و [٥٥0p‏ وسیغلق 
الحلقة لتنفيذ ما بعدها أى ما بعد 100p‏ . 

. عدد السجلات یساوی صفر‎ ۲٥٥٥۸00 

{اmovenex.ءr‏ تعنى الإنتقال للنتيجة التالية . 

ويلاحظ أيضا فى الكود السابق أننا قمنا بعمل حصر للسجلات حيث 
مین خا ا كرد غ غ كر لت الوت اه عن 
عملية البحث حيث قمنا بإخباره بأنه عندما يكون عدد السجلات أقل من ١‏ 
سیتم كتابة عبارة " لایوجد نتائج بحث عن (ط1٥2۲عء)‏ حیٹ (ط۲cھعء)‏ ھی 
حروف البحث ولقد تم كتابة القيمة 1إ١ءإهم$‏ داخل مربع النص لكى يتم 
طباعة كلمات البحث داخل صفحة نتائج البحث وقد قمنا أيضا بإخباره أنه 
عندما يكون عدد السجلات أكبر من أو يساوى ١‏ فسيتم كتابة عبارة " عدد 
الستجدت الت تحتوئ( اوةئ هى" "نجل ايت(" 
هو عدد السجلات وذلك موضح بالكود على النحو التالى : 


(۳) مهندس / إسماعیل دمران أبو زید » مشروع ۸8۶ » ص ۱۷ 


۹۸ 


با الفة افع ال الك وة دان الات الدينافيكى 


recno=0 

do while not rsrec.eof 

recno=recno+1 

rsrec.movenext 

loop 

rsrec.close 

set rsrec=nothing 

if recno < 1 then 

response.write "<center><b><font size='"'"4'""' color= black> ùھحڊ لایوجد تئج‎ 


gûùa</font" & " " & "<font size=""4"" color= red>" & search & "</font>" & " " 


& "<font size='""'"4"'" color= black> الرجاء اختیار طريقى بح‎ 


ىرخأ>/font<>/b<>/center>"‎ 


else 

if recno >= 1 then 

response.write "<center><pb><font size=""""4"""" color= black> عدد النتائج التي تحتوي‎ 
"على‎ & " '" & '">font size="'"4"'"' colاor=‎ red<" & search & ">/font>" & "" & 
"هي"‎ & " " & recn0 & " " & سجل"‎ '" & '">/font<>/b<>/ center>" 


< 


قم بلصق الكود الذى تم شرحه كاملا فى المكان الذى تود ظهور 
المرحلم الثاني من الكود : 

فى هذه المرحلة من الكود سيتم إعادة جملة ٤م1م$‏ مرة أخرى ولكن 
هذه المرة سيتم وضعها قبل الكود الخاص ببداية الصف الذى سيتم ظهور 
نتائج البحث به كما بالشكل التالى : 


۹۹ 


فا الوا الك هة داك الاك الاين 


EE 

EE 

4% 

ts. open "select ® Feo tesultl where "“aEinde" Like '$"gsseatthe"%' order by Namê ast" ,ıytoR 


recno=Û 

do while not ts.eo0f 
recno=recno+l 

چ 


LEA width="233" bgcolor="#A3CAE6" height="2d" <font color="black"»2 CENTERS s=ra ("name") $» Xft 
LEA width="7" bgcolor="$#A3CA4E6" height="da"»tfEont color="black"*»X CENTER: s=Ea ["nuu"] $ FEA 
LEA width="S55" bgcolor="$#A3CA4E6" height="da"»tfEont color="bhlack"*»XCENTER*<s=ra ("saf") $» Xft 
LEA width="B0" bgcolor="$#DFECES" height="22" align="center" 
<font color="#ODODODSBO"z 
<apan style="font-weight: 700; background-color: #DFECES"* Juez <span> 
*#Eontazs tA 
LEA width="5" bgcolor="$#DFECES" height="d2" align="center" 
<font color="#ODODODNSBO"z 
tapan style="font-weight: 700; background-color: #DFECES"*Aêja# apart #Fontet f tA 
LA width="B4" bgcolor="$DFECES" height="22" align="center" 
<font color="#OODODNSBO"» 
xapan atyle="font-vweight: 700; background-color: #DFECEB"* ae lyhkt #apant< Fontes td 
es 
% 
ra.no¥renext 
loop 
t8. close 
uFCon. Close 
get ra=nothing 
get uycon=nothing 
end if 
end if 
êd XÊ 
end 1Ê 
2 


ك ل ات فق ر ا ف کف ت ع غار 
نا لحت ال الل الى ف ا ا ع اله ار 
لهذا الجزء من الكود : 


cid width="233" hgcolor="#A3LAEo" height="dd" font colors"black"{LEIER:4=ra ("naue"} 4% tb 
ctl width=" bgcolor="fASLAEG" height="dd"pcfont color="black"?{LENTER45=ra ("nun") $ 
tid width="35" bgcolor="fA3LAEG" height="dd"ztfont color="black" {CENTER $=ra ("saf") $ {Pt 


الج د الا و رة لخا ولا المرجودة ا( اه 
الطالب » رقم الجلوس › الصف ) ويلاحظ أنناقمنابوضع 
<%("rs("name'"=%>‏ داخل الكود الخاص بالخلية الموجودة تحت ( اسم 
الطالب ) ويعنى ذلك أن ما يتم استخراجه من الحقل (٠صهم)‏ أثناء عملية 
البحث سيتم طباعته ( وضعه ) فى هذه الخلية وكذلك فى باقى الخلايا حيث 
قمنا بوضع <%="۲5)"111")%> داخل الكود الخاص بالخلية الموجودة 
تحت ( رقم الجلوس ) وأيضا قمنا بوضع <%='s)''s4fإ"')(%>‏ 
داخل الكود الخاص بالخلية الموجودة تحت ( الصف ) . 


1۰۰ 


نا المو افع الك وة دات الطاع الذينافيكى 

وبعد كتابة الكود السابق قمنا بغلق الحلقة 50 بنهايتها م0م] وأيضا 

قمنا بكتابة ۲۹.٥۷٥" ٥×۲‏ حتى يقوم بإدراج النتائج التالية وبعد ذلك قمنا 

بإغلاق الاتصال وإنهاء جمل 1f‏ وإليك كود الجدول وکود م۸ المكتوب 
داخل الخلايا كاملا على النحو التالى : 


</table> </center> 
</div> 
<div align="center'"> 
<center> 
<table border="2"' cellpadding="0" cellspacing="0" style=" border-collapse: 
collapse" bordercolor="#FFFFFF" width="710" dir="rtl]" id=" AutoNumber6" 
height='"50'""> 
<tr> 
<td bgcolor="#2480DB" width="233" align="center" height='"28'"'> 
<font color="#FFFFFF'"><b>ڀlbl|‎ pl</b></font> </td> 
<td bgcolor="#2480DB" width="77" align="center" height="28'"'> 
<font color='"#FFFFFF'"><b> |لجلوس‎ paر</b></font>‎ </td> 
<td bgcolor="#2480DB" width="55'" align="center" height="28''> 
<font color="#FFFFFF"><b>dalI</b></font></td> 
<td bgcolor="#2480DB" width="80" align="center" height="28'"'> 
<font color="#FFFFFF"><b> ابات‎ Jaدaî</b></font><‎ </td> 
<td bgcolor="#2480DB" width="75'" align="center" height="28''> 
<font color='"#FFFFFF"><b>تاilqll‎ Aüح</b></font>‎ </td> 
<td bgcolor="#2480DB" width="84" align="center" height="28'"'> 
<font color="#FFFFFF"><b> لات‎ va|طb</b></font></td>‎ 
<ltr> <tr> 
<% 
rs.open "select * from result1 where "&kind&" like '%"&search&"%o' 
order by Name asc",mycon 
recno=0 
do while not rs.eof 
recno=recno+1 
%< 
<td width="233" bgcolor="#A3C4E6" height="22" <font 
color="black'"><CENTER><%=rs('name")%> </td> 
<td width="77" bgcolor="#A3C4E6" height="22"><font 
color="black'"><CENTER><%=rs("'num")%> </td> 


1۰۱ 


الاکن 


<td width="55'" bgcolor="#A3C4E6" height="22'"><font 
color="black'"><CENTER><%=rs("'saf'")%o> </td> 
<td width="80" bgcolor="#DFECES8" height="22" align="center"> 
<font color='"#000080''> 
<span style="font-weight: 700; background-color: #DFECE8'">Jaدعت‎ </span> 
</font></td> 
<td width="75" bgcolor="#DFECES8" height="22" align="center"> 
<font color='"#000080''> 
<span style="font-weight: 700; background-color: 
#DFECE8'">dj></span></font></td> 
<td width="84" bgcolor="#DFECE8" height="22" align="center"> 
<font color='"#000080''> 
<span style="font-weight: 700; background-color: 
#DFECES8">éFaelb</span></font></td> 
</tr> 
<% 
rs.movenext 
loop 
rs.close 
mycon.close 
set rs=nothing 
set mycon=nothing 
end if 
end if 
end if 
end if 
< 
</table> 


بعد كتابة الكود كما بالشكل السابق قم بتجربة البحث وطريقة إظهار 
النتائج حيث تظهر النتائج كما بالشكل التالى : 
مثال للبحث بالاسم ولقد تم البحث بالحرف ( أ ) فى كلمات البحث : 


بنا المواقع آ[الكم وة دات الظان الدينامیكین 


ما الرس الحدناه السمد ار سڪ 


E‏ | سجل الزوار | اتضصل بنا 
r‏ قدا 


(are || 


اخثر طريقة البحف البحث بالإسم ادخل كلمات البحف اأ 


eT EE EA EEE SESE IE ASEAN 
F0 سراد الخديدامد رسف الد‎ 


اذل المستجدات: 


عرص نتائج طلاب 
الأول - الثائى - الثالث 
عدد النتائچ التي تحتوي عئى أ هي ٤‏ سل 


o00 i‏ ۴ تعدیل حذف طباعة 


أحمد فهمى عميرة ٤ EE‏ تعدیل حف طباعة 
أحند محمد مخنود é6‏ ۱ قعدیل حذق طباعة 
أحمد محمود محمد العربى Ett‏ تعدیل حذف طباعة 


ملاحظان : 

٠‏ عندما يقوم مدير النظام باستخدام طريقة البحث بالصف سيتم كتابة رقم 
١ (‏ ) إذا أراد طلاب الصف الأول فقط ورقم ( ۲) إذا أراد طلاب 
الصف الثانى ورقم( ۳) إذا أراد طلاب الصف الثالث . 

ه لابد من الالتزام بكتابة الكود كما تم شرحه مسبقا وذلك حتى تظهر نتائج 
البحث فى صفوف متتالية ولا يتم عرقلة آداء الكود أو تغيير شكل 
الصفحة . 

بعد الانتهاء من كتابة الكود الخاص بعرض بيانات الطلاب فنحن الآن 
بحاجة إلى كتابة الروابط الخاصة بالتعديل والحذف والطباعة حيث سنقوم 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 
بربط كلا منهما بالصفحات الخاصة بهما والتى سوف يتم إنشائها فى الفصل 
القادم » وإذا قمنا بالبدء فى كتابة رابط (التعديل) فلابد أن تعرف أو أننا 
إلى الرابط والهدف منه هو التعريف بأن ماسيتم التعديل فيه هو بيانات 
السجل الذى أمامه كلمة ( تعديل ) وإليك الرابط الخاص بالتعديل على النحو 
التالى ٠:‏ 
ويلاحظ من الرابط السابق أننا افترضنا الاسم (مءه.٤زله)‏ والذى 
سوف نقوم بإنشائه كرابط لصفحة التعديل وكذلك قمنا بإضافة 
(<%("1[2")ء=%>=714) لأنه عند الضغط على رابط ( تعديل ) 
سيكون 17 ( رقم السجل ) هو الهدف أى هو السجل الذى سيتم التعديل به . 
وبعد وضع رابط ( تعديل ) قم بوضع رابط ( للحذف ) على النحو 
التالى ٠:‏ 
التالى ٠:‏ 
عزيزى القارىء ... أذكرك أن الصفحات الخاصة بالتعديل والحذف 
فى كتابة رابط التعديل هى نفسها القاعدة التى استخدمت فى كتابة روابط 
الحذف والطباعة . 


بناء المواقع الالكتر ونية ذات الطابع الديناميكى 
ثانياً : إنشاء البحث المتقدم لطلاب الصفين [ الرابع والخامس )] : 
بعد الإنتهاء من عمل صفحات عرض طلاب الصفوف (الأول والثانى 
والتالث) فإننا بحاجة إلى عمل صفحات لعرض بيانات طلاب الصفين 
الرابع والخامس » وحتى نتمكن من عمل ذلك بأقل جهد فسوف نقوم بعمل 
تغيرات بسيطة فى الصفحات الخاصة بعرض طلاب الصفوف (الأول 
والثانى والثالث) . ولعمل ذلك قم باتباع الخطوات التالية : 
قم أولا بفتح صفحة ( pیھ.‏ ںای _W٥ط؟)‏ التی تم إنشائھا من قبل ثم قم 
بحفظها بالاسم ( مئه.12ء_0Wطء)‏ بنفس الطريقة التى قمنا باتباعها 
ه بعد إجراء عملية الحفظ قم بالاتجاه إلى الوضع ۳1M‏ حتى تتمكن من 
عمل تغیرات بالکود. 
ه بعد الانتقال إلى الوضع H1۷1‏ قم بالاتجاه إلى الكود الخاص بجملتى 
e٤‏ وقم بتغيير اسم الجدول من u[1وعR‏ إلى 2[إuومR‏ وذلك 
٠‏ قم بتغيير الرابط الخاص بالتعدیل إلى م.2٤1٤‏ بدلا من مpیEdit.a‏ 
وكذلك قم بتغيير الرابط الخاص بالحذف إلى ميه.2عع[ء5 بدلا من 
مءه. اط( وأخيرآً قم بتعديل الرابط الخاص بالطباعة إلى 
print2 student .asp‏ بدلا من print student .asp‏ واليك الکود 
الخاص بالصفحة بعد التعديل على النحو التالى : 


dim recno,kind,search 


kind=request.form(""kind") 
search=request.form("'search'"") 


> 
<% 
if request.servervariables("REQUEST_ METHOD")="POST" then 
if search=""" then 


ا ااك ةذ ك الط الاك 


response.write "<center><font col0r=red> تlanلڪ من فضلك قم بإدخال‎ 
ثحبلا>/font<>/center>"‎ 
else 
set rsrec=server.createobject("ADODB.Recordset"") 
rsrec.open "select * from result2 where "&kind&" like 
'%"&search&'"%' order by Name asc",mycon 
recno=0 
do while not rsrec.eof 
recno=recno+1 
rsrec.movenext 
loop 
rsrec.close 
set rsrec=nothing 


if recno < 1 then 

response.write "<center><b><font size="'""4'"" color= black> ùحڊ‎ چجئlتن لایوجد‎ 
ûùa</font" & "" & "<font size=""4"" color= red>" & search & "</font>" & " " 
& "<font size='""'"4'"" color= black> الرجاء اختيار طريقى بحث‎ 
ىرخأ>/font<>/b<>/center>"‎ 


else 
if recno >= 1 then 
response.write "<center><b><font size="""4'""" color= black> عدد النتائج التي تحتوي‎ 
"على‎ & " '" & '">font size='"'"4"'"' colاor=‎ red<>" & search & "</font>" & " " & 
"هي"‎ & " " & recno & " " & سجل"‎ '" & '">/font<>/b<>>/ center>" 
%>< 
</b></font></span></p> 
</td> </tr> 
</table> </center> 
</div> 
<div align="center'"'> 
<center> 
<table border="2"' cellpadding="0" cellspacing='"0" style=" border-collapse: 
collapse" bordercolor="#FFFFFF" width="710" dir="rtl]" id=" AutoNumber6" 
height="50'""> 
<tr> 
<td bgcolor="#2480DB" width="233" align="center" height="28'"'> 
<font color="#FFFFFF'"><b>ڀlb¦l|‎ pI</b> </font> </td> 
<td bgcolor="#2480DB" width="77" align="center" height="28'"> 


ناء الفة افع آل الك وة دات الطاب الدينافيكى 


<font color='"#FFFFFF'"><b> |لجلوس‎ paر</b></font>‎ </td> 
<td bgcolor="#2480DB" width="55" align="center" height="28''> 
<font color="#FFFFFF"><b> daJl</b></font></td> 
<td bgcolor="#2480DB" width="80" align="center" height="28'"'> 
<font color="#FFFFFF"><b> ابات‎ Jıدaî</b></font<‎ </td> 
<td bgcolor="#2480DB" width="75" align="center" height="28'"'> 
<font color="#FFFFFF'"><b> انات‎ Aûح</b></font>‎ </td> 
<td bgcolor="#2480DB" width="84" align="center" height="28''> 
<font color="#FFFFFF"><b>تllall‎ vعa|b</b></font></td>‎ 

<li> <tr> 

<% 


rs.open "select * from result2 where "&kind&" like '%"&search&"%o' 
order by Name asc",mycon 


recno=0 

do while not rs.eof 
recno=recno+1 
< 


<td width="233" bgcolor="#A3C4E6" height="22" <font 
color="black"><CENTER><%=rs("name")%> </td> 

<td width="77" bgcolor="#A3C4E6" height="22"><font 
color="black'"><CENTER><%=rs("'num")%> </td> 

<td width="55" bgcolor="#A3C4E6" height="22"><font 
color="black'"><CENTER><%=rs("'saf")%o> </td> 

<td width="80" bgcolor="#DFECES8" height="22" align="center'"'> 

<font color='"#000080''> 

<span style="font-weight: 700; background-color: #DFECES8"> 

<a href="edit2.asp ?id=<%=rs('ID")Y%>'""><font 
color="#000080"'>Jıدgî</font><</a>‎ </span> 

</font<</td> 

<td width="75" bgcolor="#DFECES8" height="22" align="center'"'> 

<font color='"#000080''> 

<span style="font-weight: 700; background-color: #DFECES8"> 

<a href="delete2.asp ?id=<%o=rs("ID'")%>'"'><font 
color='"#000080''>dij></font></a></span></font></td> 

<td width="84" bgcolor="#DFECES8" height="22" align="center"> 

<font color='"#000080''> 


الاکن 


<span style="font-weight: 700; background-color: #DFECES8"'> 
<a href="print2_student.asp?id=<%=rs('ID")Y%o>'"><font 
color="#000080'"'>relb</font><</a></span></font></td> </tr> 

<% 

rs.movenext 

loop 

rs.close 

mycon.close 

set rs=nothing 


set mycon=nothing 
end if 
end if 
end if 
end if 
< 


بعد إجراء التعديلات السابقة قم بفتح صفحة ) (search_view.asp‏ 
ثم قم بحفظھا باسم (pھ.W2ء۷1_ط١٥۲ھعء)‏ ثم قم بتغییر الود التالی : 
<form method=" POST" action="show_stu.asp'">‏ 
إلى الكود التالى : 
<form method=" POST" action="show_stu2.asp'"">‏ 
يلاحظ من الكود السابق بأننا قد قمنا بتغيير ال ۸)10 الخاص 
بالصفحة إلى pوه.2ا†ء_س0طء‏ وهى صفحة عرض بيانات طلاب الصفين 
الزات امن : 


بنا الفواقع آ[الكم وه ة دات الظاع الدينامیكی 


ثالثا : صفحة عرض بيانات سجل الزوار : 

د فاس بهل ها كن ا اتر من اة ا قات 
والملاحظات الخاصة به والآن نحن بصدد إنشاء صفحة لعرض التعليقات 
والملاحظات التى تم إضافتها داخل قاعدة البيانات . ولعمل ذلك قم بفتح أحد 
الصفحات الموجود بها قوائم جانبية ثم قم بحفظها بالاسم Reco_visit.asp‏ 
ولعلك تلاحظ أن هذا الاسم تم اختياره مسبقا أثناء القيام بتصميم الموقع 
حيث إن هذا الاسم هو الرابط الخاص ب (سجل الزوار) › وبعد الإنتهاء من 
حفظ الصفحة قم بتصميم شكل لعرض التعليقات الخاص بالزوار 
وإليك الشكل المقترح لعرض التعليقات الخاصة بالزوار على النحو التالى : 


EA . 
خا‎ 72 


عزيزى الزائر لإضافة تعليقك اضغط هنا 


الاسم : 
البريد الإلكترونى : 
طريغة الإأسندلذال على صوقعنا : 
تغبيم العوقج : 
تاريخ التعليق : 
التعليق : 

الشكل السابق يوضح الشكل الذى تم تصميمه حتى يتم عرض 
تعليقات الزوار به › ويلاحظ فى الشكل السابق أننا قد قمنا بعمل رابط 
للصفحة الخاصة باضافة التعليقات وھ (add com.asp)‏ ويلاحظ أيضا 
أننا قد قمنا بإنشاء جدول للتنسيق مكون من ۷ صفوف وعدد ۲ أعمدة وكذلك 
يلاحظ آنه تم إخفاء حدود الجدول واستبدالها بحدود بيضاء اللون ويلاحظ 


بناء المواقع الإلكترونية ذات الطابع الديناميكى 
ذلك لكى يتم الفصل بين كل تعليق وآخر حيث إننا إذا قمنا بحذف الصف 
الخاص بالنجوم سنلاحظ أن جميع التعليقات ستكون متتالية فى الشكل ولذلك 
أقترح عمل الصف الأخير بهذا الشكل حتى يتم الفصل بين التعليقات 
وإليك الكود الخاص بإنشاء الجدول وكذلك الرابط على النحو التالى : 


<p align="center">&nbsp;</p> 
<p align="center'"'><u><font color="#000080'"'><span style="font-size: 
17pt"> 
<b><a href="add_com.asp'"><font col0or='""'#000080'"'<كقيلعت عزيزى الزائر لإضافى‎ 
ھا‎ طغضا>/ont<>/4<>>/‎ b> >/ span> </font> <u> <br> 
&nbsp;</p> 
<div align="center'"> 


<center> 
<table border="1"" cellpadding="0" cellspacing="0" style="border-collapse: 
collapse" bordercolor="#FFFFFF" width="617" dir="rtl]" id=" AutoNumber6'"" 
height='""213''"> 
<tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face=" Tahoma" size="2">&nbsp; pull :</font<</b></td> 
<td width="422" bgcolor="#DFECES8" height="30">&nbsp;</td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height='""30'"><b> 
<font face='""' Tahoma" size='"2'">&nۆbspص;ىئوڙزتڪلإلا البريد‎ n sp: 
:</font></b></td> 
<td width="422" bgcolor="#DFECES8" height="30">&nbsp;</td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face="Tahoma"" size='"2'">& 1 ۆsp; طريقى الإستد لال‎ 
على موقعنا‎ :>/0n<>/ط<>/)d<‎ 
<td width="422" bgcolor="#DFECES8" height="30">&nbsp;</td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height=""30'"><b> 
<font face='" Tahoma" size='""2'"'> & nbsp; عز¶gؤl‎ مıaî‎ :>/fontt</b></td> 
<td width="422" bgcolor="#DFECES8" height="30">&nbsp;</td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="31'"><b> 


11۰ 


ناء الفة افع آل الك وة دات الطاب الدينافيكى 


<font face=" Tahoma" size="2'">&nbsp;<span 141g="'aإ-eg'">قيلعتلا تاريخ‎ 


:</span></font<</b></td> 
<td width="422" bgcolor="#DFECES8" height="31">&nbsp;</td> 
<tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="31'"><b> 
<font face="Tahoma" size='"2'">&nbsp;ğيlaةJllا‎ :</font><</b></td> 
<td width="422" bgcolor="#DFECES8" height="31">&nbsp;</td> 
<tr> <tr> 
<td width="615" bgcolor="#FFFFFF" colspan="2" height='"31'"> 
<p align="center'"'><span lang="en-us"><font size="4" 
color="#FF0000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& 
nbsp;j&nbsp; 
* * * *&nbsp;j&nbsp; &nbsp;&nbsp;&nbsp;j&nbsp; * * * 
*&nbsp;&nbsp; &nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 
* * * * </font></span></td> 
</tr> </table> 
</center> 
</div> 
<p dir="'rtl" style="text-indent: 19px; line-height: 200% ;" 
align="center">&nbsp;</p> 
<p dir="'rtl" style="text-indent: 19px; line-height: 200%;" 
align="left">&nbsp;</p> 
<p dir="'rtl" style="text-indent: 19px; line-height: 200% ;" 
align="left">&nbsp;</p> 
<p dir="'rtl" style="text-indent: 19px; line-height: 200% ;" 
align="center">&nbsp;</p> 
<p>&nbsp;</p> 
<p>&nbsp;</td> 
</tr> </table> </center> 


الكود السابق هو عبارة عن رابط إضافة التعليقات والجدول الخاص 
بعرض التعليقات » فبعد كتابة الكودالسابق يتبقی لنا كتابة کود A۸8۲‏ 
وفى هذه الصفحة سوف نستخدم كود لعرض البيانات الموجودة بجدول 
00g‏ ط_و1ں وکود آخر لتقسيم الصفحات حیث سنقوم بكتابة كود ليتم عرض 
عدد معين من التعليقات داخل الصفحة الواحدة وسيقوم باستكمال عرض 
باقى التعليقات فى صفحات أخرى متعددة . 


اا س ڪڪ 


اک و الاک 
واليك المرحلة الأولى من كود ۸8۲ على النحو التالى : 


<% 
PageNo=request.querystring("PageNo") 
If PageNo=""" then 
PageNo=1 
end if 
>< 
<% 
dim recno 
rs.open "select * from vis_book order by add_date desc",mycon,3,3 
If rs.EOF Then 
Response. Write("<b><div align=""center'""><font size=5 color=red>Y 
/>توجد تعلیقات مسجلہ بالموقع‎ ٤٥١< <ظط/><1۷ل/>‎ 
rs.Close 
Set rs = Nothing 
Response.End 
End If 
%<>< 
<% 


rrr یدانی دالت ا 0 ات‎ ferret 


TotalRecs = rs.recordcount 


rs.Pagesize=4 

TotalPages = cInt(rs.pagecount) 

rs.absolutepage=PageNo 

Response. Write"<font size=3>" 

Response.Write vbCrLf & "<div align=""center'""'"><b> gy " & TotalRecs 
& " سجل مقسم ن علی‎ ' & 16 

if TotalPages < 10 then 

pageprint<"alaص'""‎ 

elseif TotalPages > 10 then 

pageprint" ""'ص‎ 

else 

pageprint=<"alaص'""‎ 

end if 

Response.Write vbCrLf & pagepriıt(&'" iحzaصلا وانت الآن في‎ '" & PN 
&'"</b></div>" 


1۲ 


با الفة افع ال الك وة دان الات الدينافيكى 


Response. Write'"<p></font>" 
recno=0 
x= 0 


For x = 1 to rs.Pagesize 
If rs.eof then 


Exit For 
Else 
recno=recno+1 


شرح سريع لأهم النقاط بالكود : 

فى بداية الكود قمنا بتحديد متغير Page N0‏ وذلك بكتابة 
0 ععهP=‏ قيمة هذا المتغير سيتم استقبالها عن طريق رابط استخدام 
request.guerystring‏ حيث إن 0× ءعه۴ هو رقم الصفحة وكذلك قمنا 
بكتابة جملة 1۴ نقصد بها أن عندما تكون 0 معو فارغة أى لايوجد عدد 

صفحات ستكون رقم الصفحة (1) وذلك موضح بالكود على النحو التالى : 
%< 
PageNo=request.querystring("PageNo")‏ 
If PageNo=""" then‏ 
PageNo=1‏ 


end if 
00< 


بعد ذلك قمنا بكتابة جملة ال {ءع[ع؟ والخاصة بتحديد محتويات 
الجدول )0هط_ء۷1 وقمنا أيضاأً بترتيب البيانات التى ستظهر برابط سجل 
الزوار ترتيبا تنازلي وذلك استناداً للحقل ماول_ لله حيث إننانرغب فى 
أن تظهر تعليقات القراء حسب الوقت من الأحدث إلى الأقدم وكذلك قمنا 
بكتابة جملة 1۴ والتى نقصد بها أنه عندما يكون الجدول فارغا ستظهر عبارة 
" لا توجد تعليقات مسجلة بالموقع " وذلك موضح بالكود على النحو التالى : 


<% 


dim recno 


rs.open "select * from vis_book order by add_date desc",mycon,3,3 


۱1۳ 


تیافک 


If rs.EOF Then 
Response. Write("<b><div align=""center'"'"><font size=5 color=red> Y 


("<ط/><1۷ل/><16٥]/>توجد‏ تعلیقات مسجل بالموقع 


rs.Close 

Set rs = Nothing 

Response.End 
End If 


بعد ذلك قمنا بكتابة كود لتقسيم التعليقات على صفحات وفى بداية 
الكود قمنا بكتابة جملة ٤م ota] Recs=rs.rec0o 1d c0u‏ 1 حتى یتم حساب 
ا ا خود ا عد ا و ت 
عدد السجلات التى سيتم عرضها بالصفحة الواحدة وذلك موضح بالكود 
على النحو التالى : 


TotalRecs = rs.recordcount 
rs.Pagesize=4 


TotalPages = cInt(rs.pagecount) 
rs.absolutepage=PageNo 


ويلاحظ من الكود السابق أننا قمنا بكتابة رقم 4 و نقصد بذلك أن عدد 
السجلات التى ستظهر بالصفحة الواحدة هى 4 سجلات . 


بعد ذلك قمنا بكتابة جملة بالكود لبيان عدد السجلات الموجودة داخل 
قاعدة البيانات وكذلك بيان عدد الصفحات التى تم تقسيم السجلات عليها 
وذلك موضح بالكود على النحو التالى : 


Response. Write'"<font size=3>" 
Response.Write vbCrLf & "<div align=""center'""'"><bþ> جgي‎ " & TotalRecs 


1۹6 & ' سجل مقسم ن علی "' & 


دك فف نک کو ا كن كاک اة د 
يكون عدد الصفحات أقل من ٠١‏ وكتابة كلمة" صفحة " عندما يكون عدد 
الات كر رفك اه غ ار اقا 


if TotalPages < 10 then 


11٤ 


بنا لواف ال الك وة دة الطان الدينافيكى 


pageprint="lèص'""‎ 
elseif TotalPages > 10 then 


» 


pageprint" Fram" 


else 
pageprint="ٽlwèص'""‎ 
end if 


بعد ذلك قمنا بكتابة الجملة الخاصة بطباعة رقم الصفحة الحالية 

سيتم طباعة رقم الصفحة التى يتم تصفحها وذلك موضح بالكود 
على النحو التالى : 

Response.Write vbCrLf & pageprint&'"" وانت الآن في الصفحت‎ " & PageNo 

&'""</b></div>" 

Response. Write'"<p></font>" 


recno=0 
x= 0 


For x = 1 to rs.Pagesize 
If rs.eof then 
Exit For 


Else 
recno=recno+1 


وبهذانكون قد انتهينا من كتابة المرحلة الأولى من الكود 
وننتقل إلى كتابة المرحلة الثانية من الكود . 


المرحلة الثاني من الكود : 

فى هذه المرحلة من الكود سنقوم بتحديد الحقول التى سيتم ظهورها داخل 
خلايا الجدول الذى قمنا بتصميمه » وإليك الكود الخاص بالجدول متضمنا أسماء 
الحقول التى سيتم عرضها داخل خلاياه وذلك على النحو التالى : 


11۵ 


الناصكن 


<center> 
<table border='"1" cellpadding="0" cellspacing="0"" style=" border-collapse: 
collapse" bordercolor="#FFFFFF" width="617" dir="rtl]" id=" AutoNumber6" 
height='""213'"> 
<tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face=" Tahoma" size="2">&nbsp; pull :</font><</b></td> 
<td width="422" bgcolor="#DFECES8" height="30'"><font 
color="blue'"><CENTER><%=rs("name")%></td> 
<ltr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face=""' Tahoma" size='"2'">&nbspص;ڪ”ئوزتڪکلإلا البريد‎ n sp: 
:</font></b></td> 
<td width="422" bgcolor="#DFECES8" height='"30'"><font 
color="blue'"><CENTER><%=rs("email")%></td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face="Tahoma" size='"2'">& 1 ۆsp; طريةق الإستد لال‎ 
على موقعنا‎ :>/٥n<>/ط<>/)d<‎ 
<td width="422" bgcolor="#DFECES8" height="30'"><font 
color="blue'"><CENTER><%=rs("method")%></td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face=" Tahoma" size='""2'"'>& nbsp; قوقع‎ مaت‎ :>/fontt</b></td> 
<td width="422" bgcolor="#DFECES8" height="30'"><font 
color="blue'"><CENTER><%=rs("op_website'")%></td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="31'"><b> 
<font face=" Tahoma" size="2'">&nbsp;<span 141g="aإ-eg'">قيلعتلا تاريخ‎ 
:</span></font<</b></td> 
<td width="422" bgcolor="#DFECES8" height="31'"><font 
color="blue"><CENTER><%=rs("add_ date'")%></td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="31'"><b> 
<font face="Tahoma" size='"2'">&nbsp;ğيlazJll‎ :</font></b></td> 
<td width="422" bgcolor="#DFECES8" height="31'"><font 
color="blue'"><CENTER><%=rs("comment'")%></td> 
</tr> <tr> 
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ناء الفة افع آل الك وة دات الطاب الدينافيكى 


<td width="615" bgcolor="#FFFFFF" colspan="2" height='"31'""> 

<p align="center'"'><span lang="en-us"><font size="4" 
color="#FF0000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;& 
nbsp;j&nbsp; 

* * * *&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;j&nbsp; * * * 
*&nbsp; &nbsp;&nbsp;&nbsp; &nbsp; &nbsp;&nbsp;&nbsp;&nbsp; 


* * * * </font></span></td> </tr> 
<% 
rs.MoveNext 
End If 
Next 
>< 


يمكنك ملاحظة أن الأجزاء المظللة بالكود السابق هى الحقول التى 
سيتم عرضها داخل خلايا الجدول ماعدا الجزء الأخير والموضح كالتالى : 


<% 
rs.MoveNext 
End If 


Next 
00< 


وهو الجزء الخاص بالانتقال إلى السجل التالى . 
المرحلت الثالثت من الكود : 


</table> 
<% 
If PageNo > 1 or NOT rs.EOF Then 
Response.Write "<div align='"""center'""'"><ۆb>‎ Jãتil‎ 
aلl:&nbsp;&nbsp;</b>"‎ 
End If 


If PageNo > 1 Then 
< 
<b> 
<a href="Reco_visit.asp?PageNo=<%=PageNo - 1%>"'> 
<font size="4" color="#000000'"'> 
&nbsp;ğڊlwJl</font><</a><font‎ size='""4'"> 


1۷ 


ا اك و اة الافكن 


<% 
End If 
If PageNo > 1 or NOT rs.EOF Then 
For LinkPageNum = 1 to TotalPages 
If cint(LinkPageNum) = CINT(PageNo) Then 
Response.Write LinkPageNum 


Else 
%< 
<a href=" Reco_visit.asp?PageNo=<%=LinkPageNum%>'"'><font 
color="#000000'"'><%=LinkPageNum%></font></a> 
<% 
End If 
Next 
End If 
If NOT rs.EOF then 
%<> 
<a href=" Reco_visit.asp?PageNo=<%=PageNo + 1%>'""><font 
color="#000000">&nbsp;aJlll</font<</a> 
<% End if 
rs.close 
mycon.close 
set rs=nothing 
set mycon=nothing 
< 


رة الاق هو ةلكاف بكرف اتخات و ال 
سيتم ظهور تعليق الزائر بداخله . 


وإليك شرح لأهم نقاط الكود السابق : 

PageN0=<%=PageNo - 1%<‏ هو الكود الخاص بالانتقال إلى 
ا 

PageN0=<%=PageNo +1%>‏ هو الكود الخاص بالانتقال إلى 
ال 


1۸ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
>(%inkPageNumاL=%<=PageN0‏ هو الرابط الخاص برقم 
الخد 
href"Reco_visit.asp‏ تم كتابة هذا الرابط لأن الصفحات الأخرى 
ستظهر فى نفس رابط صفحة سجل الزوار 
وإليك كود الصفحة كاملا متضمنا كراد ۸8۶ على النحو التالى : 


<p align="center''><u><font color="#000080'"><span style="font-size: 
17pt"'> 
<b><a href="add_com.asp'"'><font color='""#000080''><كقيلعت عزيزى الزائر لإضافى‎ 
ھا‎ طغضا>/ont<>/4<>>/‎ b> >/ span> </font> < / u> <br> 
<% 
PageNo=request.querystring("PageNo") 
If PageNo=""" then 
PageNo=1 
end if 
%< 
<% 
dim recno 
rs.open "select * from vis_book order by add_date desc",mycon,3,3 
If rs.EOF Then 
Response. Write("<b><div align=""center'"'"><font size=5 color=red>Y 
/>توجد تعلیقات مسجلہ بالموقع‎ ٤٥١< >/ 1۷< <ظط/>‎ 
rs.Close 
Set rs = Nothing 
Response.End 
End If 
%>< 
<% 
TotalRecs = rs.recordcount 
rs.Pagesize=1 
TotalPages = cInt(rs.pagecount) 
rs.absolutepage=PageNo 
Response. Write"<font size=3>" 
Response.Write vbCrLf & "<div align=""center'""'"><bþ> جgي‎ " & TotalRecs 


1۹1 & ' سجل مقسم ن علی "' & 
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س ن ا اة تلافک 


if TotalPages < 10 then 
pageprint="ٽlwaص'"‎ 
elseif TotalPages > 10 then 
pageprint" Fram" 
else 
pageprint="تlwaص'"‎ 
end if 
Response.Write vbCrLf & pageprit&" izضaصلl وانت الآن في‎ '" & PaeNo 
&'""</b></div>" 
Response. Write'"<p></font>" 
recno=0 
x= 0 
For x = 1 to rs.Pagesize 
If rs.eof then 
Exit For 
Else 
recno=recno+1 
< 
</p> 


<div align="center'"> 


<center> 
<table border="1" cellpadding='"0" cellspacing="0"" style=" border-collapse: 
collapse" bordercolor="#FFFFFF" width="617" dir="rtl]" id=" AutoNumber6"" 
height="213'"'> 
<tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face=" Tahoma" size="2">&nbsp; pull :</font<</b></td> 
<td width="422" bgcolor="#DFECES8" height="30'"><font 
color="blue'"><CENTER><%=rs("name")%></td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face="Tahona"" size='"2'">&nbspص;ىئوزتڪلإلا البريد‎ n sp: 
:</font></b></td> 
<td width="422" bgcolor="#DFECES8" height='"30'"><font 
color="blue'"><CENTER><%=rs("email")% ></td> 
</tr> <tr> 
<td width="193" bgcolor="#A3C4E6" height="30'"><b> 
<font face="Tahoma" size='"2'">&1ۆsp; طريةق الإستد لال‎ 


۱۲۰ 


بنا الفة افع آل الك وة دات الطاب الديتافيكى 


<d)/><ط/><n٥/>:‏ على موقعنا 
<td width="422" bgcolor="#DFECES8" height='"30'"><font‏ 
color="blue"><CENTER><%=rs("method")% ></td>‏ 
</tr> <tr>‏ 
<td width="193" bgcolor="#A3C4E6" height="30'"><b>‏ 
<font face=" Tahoma" size='""2'"'>& nbsp; عزقgقl مıaî :<>/fontt</b></td>‏ 
<td width="422" bgcolor="#DFECES8" height='"30'"><font‏ 
color="blue'"><CENTER><%=rs("op_website'")%o></td>‏ 
</tr> <tr>‏ 
<td width="193" bgcolor="#A3C4E6" height="31'"><b>‏ 
تاريخ التعليق>"'eg-إ1a1g="a <font face=" Tahoma" size="2'">&nbsp;<span‏ 
:</span></font<</b></td>‏ 
<td width="422" bgcolor="#DFECES8" height="31'"><font‏ 
color="blue'"><CENTER><%=rs("add_date")%></td>‏ 
</tr> <tr>‏ 
<td width="193" bgcolor="#A3C4E6" height="31'"><b>‏ 
<font face="Tahoma" size='"2'">&nbsp;ğيlazJllا :</font><</b></td>‏ 
<td width="422" bgcolor="#DFECES8" height="31'"><font‏ 
color="blue"><CENTER><%=rs("comment'"')%></td>‏ 
</tr> <tr>‏ 
<td width="615" bgcolor="#FFFFFF" colspan="2" height='"31'"">‏ 
<p align="center'"'><span lang="en-us"><font size="4"‏ 
color="#FF0000">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&‏ 
nbsp;j&nbsp;‏ 
*&nbsp;j&nbsp; &nbsp;&nbsp;&nbsp;j&nbsp; * * *‏ * * * 
*&nbsp; &nbsp;&nbsp;&nbsp; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;‏ 
</font></span></td>‏ * * * * 
</tr>‏ 
%< 
rs.MoveNext‏ 
End If‏ 
Next‏ 
< 
</table>‏ 
%< 
If PageNo > 1 or NOT rs.EOF Then‏ 
ilتJã‏ >bۆ<>"'""'align='"""center Response.Write "<div‏ 
">l:&nbsp;&nbsp;</bلal‏ 
End If‏ 
If PageNo > 1 Then‏ 
><% 
<b>‏ 
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ا ا ةا ك الط التضافكن 


<a href="Reco_visit.asp?PageNo=<%=PageNo - 1%>"'> 
<font size="4" color="#000000'"'> 
&nbsp;ğڊlwJl</font></a><font‎ size=""'4''> 
<% 
End If 
If PageNo > 1 or NOT rs.EOF Then 
For LinkPageNum = 1 to TotalPages 
If cint(LinkPageNum) = CINT(PageNo) Then 
Response.Write LinkPageNum 
Else 
>< 
<a href=" Reco_visit.asp?PageNo=<%=LinkPageNum%>'""><font 
color="#000000'"><%=LinkPageNum%></font></a> 
<% 
End If 
Next 
End If 
If NOT rs.EOF then 
>< 
<a href=" Reco_visit.asp?PageNo=<%=PageNo + 1%>'""><font 
color="#000000">&nbsp;aJlll</font><</a> 
<% End if 
rs.close 
mycon.close 
set rs=nothing 
set mycon=nothing 
< 


تفن ا ف اخ ف ا ف ر الت الا تسل 


۱۲۲ 


بنا الفواقع آل الك وة دات الظاع الديناموكی 


جص جح ÙÈÊ‏ 
الب & 
ا ii‏ 
Limi)‏ 
اللاقج لابية 


اعلانات العذرسة 


تفل مده س التشعدد امنا لاه ء 


يلاحظ أن الشكل السابق يوضح الشكل النهائى لصفحة سجل الزوار 
حيث تم إضافة التعليقات من الصفحة الخاصة بإضافة التعليقات 
رغ لقال لے الر اط الخاضن فة نكل الزو ار مرك الاقات 


كما بالشكل السابق . 


عزيز ى الزائر لاضافة تعليقك اضغط هنا 


يوجد ؛ سجل مقسمة على ١‏ صفحات وانت الآن فى الصفحة ١‏ 


الاسم : أحمد فهمى عبد المقعر عبيرة 

ahmedfahmy258 @gmail cem : البريد الإلگترولی‎ 

طريغة الإستدلال على هوقعنا : وزارة التربية و التعليم 

نقييم العوقع : ممتاز 

تاريخ التعليق : TN jhe‏ 4 صن 

النعليق : كرك بشدة على سر عة قشر النتائج 
eê s6êê aeês‏ 

اللإسم : مجند قهمى عبد لماحم رة 

البريد الإلكترونى : mohamed456@yahoo.com‏ 

طريغة الإسندلال على صوقعنا : محرك بح 

تقييم الحوقع : جیا 

تاريخ التعلبق : 1 ص 

التعليق : موتع بیط چداً 
cece ese sees‏ 


۳ 


النصل السارس 
انشاء صفحات تعديل 
وحذف البيانات وطباعتها 


بنا الفواقع آل الك وه ة دات الظا الدينامیكی 


انشاء صفحات تعديل وحذف البيانات وطباعتها 

أولا : صفحة حذف البيانات الخاصة بالطلاب : 
فى الفصل السابق تم عمل رابط للصفحة delete.asp‏ والتى نحن الآن 

بصدد إنشائها اللآن حيث سيتم من خلال هذه الصفحة حذف بيانات ونتيجة 
الطالب المحدد داخل الصف »› وحتى نبدأ فى عمل هذه الصفحة قم بفتح 
صفحة من الصفحات التى لايوجد بها قوائم جانبية » ثم قم بحفظها بالاسم 
.اء وقبل أن نبدأً فى تصميم وبرمجة هذه الصفحة عليك أن تعرف 
أن عند الضغط على الرابط (حذف) فإن عملية الحذف لن يتم إجراؤها وإنما 
سنقوم بتصميم رسالة تأكيد للحذف فرسالة التأكيد تعد بمثابة رسالة تنبيه إلى 
المستخدم فمن خلال هذه الرسالة سيتم تنبيه المستخدم إلى أنه سيتم حذف 
بيانات الطالب الذى تم اختياره فإذا ضغط المستخدم على زر (موافق) فسيتم 
الحذف أما إذا قام بالضغط على زر (إلغاء الأمر) فإن أمر الحذف سيتم 
إلغائه ولعلك تلاحظ ذلك أثناء تعاملك مع نظام التشغيل و لم1 فعند 
قيامك بعملية حذف ملف معين يظهر لك أمر معام وعند الضغط عليه 
الخيار )1ء5 وإنما يتم توجيه رسالة تأكيد أولا. 

والآن قم بتصميم شكل لرسالة التأكيد بداخل األصفحة Delete.asp‏ 
كما بالشكل التالى : 


هل أت متأكد من حذف بيانات ونتيجة هذا الطالب ؟ 
اسم الطالب الصف رقم الجلوس 


وغ الغاء الاسر 


۱۲۵ 


ف اا فة ف اة الاك 


الشكل السابق عبارة عن جدول منسق حيث سيتم إظهار بيانات 
الطالب الذى سيتم حذفه بداخله وكذلك يوجد زر (موافق) لكى يتم تأكيد 
الحذف وزر (إلغاء الأمر ) لكى يتم إلغاء أمر الحذف وإليك الكود الخاص 
بإنشاء الجدول على النحو التالى : 


<center> 
<table border="2"" cellpadding="0" cellspacing="0" style=" border-collapse: 
collapse" bordercolor="#FFFFFF" width="710" id=" AutoNumber8" 
height="105'"'> 
<tr> 
<td colspan="3" width="709" bgcolor="#2480DB" height="28'"><b> 
<font color="#FFFFFF'">&nۆspض;|ذiھ‎ ۃimجیتنو هل آنت متأاکد من حذف بیانات‎ 
? پبلاطلا>/font<>/b<>/td<‎ 
</tr> <tr> 
<td width="326" align="center" height="22" bgcolor="#A3C4E6'"'> 
<font color='"#000080'"><b>&nbsp;پڌlbll‎ pw|l</b></font></td> 
<td width="133" align="center" height="22" bgcolor="#A3C4E6'"'> 
<font color="#000080'"><b>&nbsp;idصlt</b></font></td>‎ 
<td width="248" align="center" height="22" bgcolor="#A3C4E6'"> 
<font color="#000080'"><b>&nbsp;سولجلا رقم‎ </b> </font> </td> 
</tr> <tr> 
<td width="326" height="29" bgcolor="#DFECE8">&nbsp;</td> 
<td width="133" height="29" bgcolor="#DFECE8">&nbsp;</td> 
<td width="248" height="29" bgcolor="#DFECE8">&nbsp;</td> 
<tr> <tr> 
<td colspan="3" width="709" height="26" bgcolor="#2480DB" 
align="center'"> 
<form method="POST" action='""--WEBBOT-SELF--'"> 
<!--webbot bot="SaveResults" U-File="fpweb:///_private/form_results.csv'"" 
S-Format="TEXT/CSV" S-Label-Fields="TRUE" --><p> 
<input type="submit" value=" ğjفlge‎ '" name="B1'"'><input type="reset" 
value=" الغاء الأمر‎ " name='"82'"><>/ p< 


</form> </td> </tr> </table> </center> 


بعد الانتهاء من تصميم الشكل السابق قم بالضغط بالزرالأيمن 
للماوس ڈ‌م Jëۃم‏ بتر Send to other ڙlتëخlڊ pê pۃî Form Properites‏ 


۲١ 


بنا لفو اف اا لك وة اة الان ادافين 
delete .asp 71d =>% =‏ > بجانب Acti0٥۸‏ تم قم بالضغط علی 0k‏ 
بعد ذلك قم بالانتقال إلى وضع H1١1‏ ثم قم بلصق الكود التالى 
فى أعلى الصفحة . 


<script language="JavaScript'"'> 
<!-- 

function FP goToURL( url) {//v1.0 
window.location=url; 


// --< 
</script> 


الكود السابق هو كود بلغة الجافا سكربت والهدف من كتابة هذا الكود 
هو التحكم فى الرابط الخاص بزر (إلغاء الأمر) فعندما تم كتابة رابط صفحة 
(eet e.sp‏ بجانب ال 10ء۸ فبذلك قد أعطينا أمر بالانتقال إلى هذه 
الصفحة عند الضغط على جميع الأزرار الموجودة بالصفحة ؛ ولأننا لا نريد 
ربط هذه الصفحة بزر (إلغاء الأمر) فقد قمنا بكتابة هذا الكود لكى نتمكن من 
التحكم فى رابط زر (إلغاء الأمر) فبعد كتابة الكود السابق فالآن يمكنك 
التحكم بالرابط الخاص بزر (إلغاء الأمر) عن طريق كتابة الرابط المراد 
الإنتقال إليه بجانبه على النحو التالى : 


<input type="submit" value=" ğjفlge‎ '" name="B1'"'><input type="reset'" 
value=" لأر‎ ell " name='"B2'"'> 


onclick="FP_goToURL(/*href*/'show_stu.asp')'"</p> 


ويمكنك ملاحظة أن السطر المظلل بالشكل السابق هو الجزء الخاص 
بالرابط الذى سيتم الانتقال إليه عند الضغط على زر (إلغاء الأمر) ويلاحظ 
أيضا من الكود كتابة الصفحة الخاصة بالبحث عن بيانات طلاب الصفوف 
(الأول والثانى والثالث) وهى (معه. سء اv_ط١٤4۲عء)‏ حيث عند إلغاء أمر 
الحذف سيتم التوجه إليها . 


۷ 


ا ف اک فة 6 فاا اتناك 


E APA E E A Ss 
: مرحلتین کالتالی‎ 


-المرحلم الأولى : 


<% 

id=request.querystring("'id") 

if request.servervariables('"'REQ UEST_METHOD")="POST'" then 
deletesqI=""delete * from result1 where ID=" & id 

set rs=mycon.execute(deletesq1) 


set rs=nothing 

set mycon=nothing 
response.redirect "search_view.asp" 
end if 

>< 


شرح آهم سطور الكود السابق : 

E aE‏ ل ا ا 
حيث سيتم حذف السجل الذى تم تحديده من الجدول 1)1ںءم۲ ذلك اعتماداً 
ی ا کک کو کن ا ر و 
هة اة الان ع الي اا 


deletesql=" delete * from result1 where ID=" & id 
set rs=mycon.execute(deletesq1) 


كما يلاحظ أيضا أننا قمنا بكتابة سطور أخرى لكى يتم إغلاق الاتصال 
وإنهاء عمل وع والانتقال إلى الصفحة مئه.سعار_طء۲هعء عند إتمام عملية 

ال و كه كات الس ر كى الت الي 
set rs=nothing‏ 


set mycon=nothing 
response.redirect "search_view.asp" 


end if 
00< 


۱۸ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
المرحلم الثاني : 
بعد كتابة الجمل الخاصة بالحذف فنحن الآن بحاجة إلى كتابة جملة 
)اء لكى يتم تحديد بعض البيانات الخاصة بال 1 الذى سيتم حذفه 
حيث إننا نرغب فى عرض بعض الحقول الخاصة بالسجل الذى سيتم حذفه 
وإليك الجملة الخاصة بتحديد بيانات السجل الذى سیتم حذفه على النحو 
التالى : 


<% 


selectSQL="select * from result1 where ID=" & id 


set rs=mycon.execute(selectSQL) 
< 


بعد كتابة جملة †عع][م6 السابقة قم بالاتجاه إلى الخلايا التى ترغب 
فى إظهار البيانات بها ثم قم بكتابة اسم الحقل بالطريقة نفسها التى تم شرحها 
ل 


<tr> 
<td width="326" align="center" height="22" bgcolor="#A3C4E6'"'> 
<font color='"#000080'"><b>&nbsp;پڌlbll‎ pw|l</b></font></td> 
<td width="133" align="center" height="22" bgcolor="#A3C4E6'"'> 
<font color="#000080'"><b>&nbsp;idصll</b></fontt</td>‎ 
<td width="248" align="center" height="22" bgcolor="#A3C4E6'""> 
<font color='"#000080'"'><>b>&nbspص;سولجلا رقم‎ >/<>/ fon t< </td> 
</tr> <tr> 
<td width="326" height="29" bgcolor="#DFECE8'"><font 
color="#000080'"'><CENTER><%=rs("name")%o></td> 
<td width="133" height="29" bgcolor="#DFECE8'"><font 
color="#000080'"'><CENTER><%-=rs("saf'')Y%o></td> 
<td width="248'" height="29" bgcolor="#DFECE8"><font 
color="#000080'"'><CENTER><%=rs("num")%></td> 
<ltr 


4 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 
بعد كتابة الأكواد السابقة نكون قد انتهينا من كتابة كود ۸8۴ الخاص 
بهذه الصفحة ويمكنك تجربة الصفحة وذلك عن طريق البحث باحدى طرق 
البحث ثم اختيار أحد السجلات التى ظهرت فى نتائج البحث لكى يتم حذفها . 
ويمكنك ملاحظة ذلك فى الأشكال التاليت : 
)١‏ عند اختيار طريقة البحث بالاسم و البحث عن " أ " فظهرت نتائج 
البحث كما بالشكل التالى : 


أحمد فهبى عيد المتعم عميرة 


امچد عادل پو ئس ٍ0 ۳ تعدیل حذف 2 
ا ا . ۲ تعدیل حذف طباعة 
) عند الضغط على زر حذف للسجل الأول ظهرت رسالة التأكيد 
كما بالشكل التالى : 
هل أنت متأكد من حذف بيانات ونتيجة هذا الطالب ؟ 
اسم الطالب الصف رقم الجلوس 
أحمد هى عبد المنعم عميرة ۳ 0 


ٔ( عند الضغط على زر ( موافق ) تم الانتقال إلى الصفحة الخاصة 
بالبحث وعند البحث مرة أخرى بحرف " أ " ظهرت البيانات بدون 
السجل الذى تم حذفه كما بالشكل 


راداي TEES ES‏ 
ا عادل پو ٹس û‏ خف 
لم مك مکيوة .¥ ۲ حذف 


الجدول الموجود بجمل {ءم]اعS؟‏ من u11ومR‏ إلى u12ومR‏ وكذلك قم 
بتغيير اسم الصفحة التى سيتم الانتقال إليها من مpءه.‏ سء ۷1_طء۲همء إلى 
sp‏ .earch_view2ك‏ وكذلك قم بتغيير ال 10ء۸ الخاص بالصفحة من 


فا ةافح الك وة اة الان الديناميكى 


ete.aspاDe‏ إلى مpوه.2ءtء1اe(‏ وإليك التعديلات التى تم إدخالها 
على صفحة 2ء)٥[٥5‏ على النحو التالى : 


<% 
id=request.querystring("'id") 
if request.servervariables('"'REQ UEST_METHOD")="POST'" then 
deletesqI="delete * from result2 where ID=" & id 
set rs=mycon.execute(deletesq1) 
set rs=nothing 
set mycon=nothing 
response.redirect "search _view2.asp" 
end if 
< 
: المرحلى الثاني‎ 
/> 
selectSQL="select * from result2 where ID=" & id 
set rs=mycon.execute(selectSQ L( 
7 
: Ac)! الکود الخاص بے‎ 
<form method=" POST" action="delete2.asp ?id=<%=id%>" dir="rtl]"> 
: الكود الخاص بزر ر إلغاء الأمر)‎ 


<input type="reset'" value=" مر‎ slëll " name="B2" 
onclick="FP goToURL(/*href*/'search_view2.asp')" 


ثانياً : صفحات حذف التعليقات : 

فى بعض الأحيان يكون مدير الموقع مضطراً إلى حذف أحد التعليقات 
بسبب أنها تحتوى على عبارات غير لائقة وحتى يتمكن المدير من عمل هذا 
الإجراء لابد من وجود صفحة لعرض التعليق وعند الضغط على زر 
(حذف) ينتقل إلى صفحة أخرى لعرض التفاصيل الأخرى عن التعليق 
وكذلك تأكيد عملية الحذف » إذا فنحن الآن بحاجة إلى صفحتين سنقوم 
بإنشاء الصفحة الأولى وهى الخاصة بعرض جميع تعليقات الزوار وأوامر 
الحذف وسوف نقوم بتسميتها بالاسم مئه. ٣‏ هع _ 1ء( والصفحة الثانية 
خاصة بتأكيد الحذف وسوف نقوم بتسميتها بالاسم confirm _del.asp‏ 


1 


لاف ازاك وة اة الظات اذاي 
التى ليس بها قوائم جانبية بالاسم مئه. ۳٣٣٥ء‏ _ 1ع ثم تصميم جدول 
لعرض التعليقات كما بالشكل التالى : 


حذف 
وبعد الانتهاء من تصميم الشكل السابق قم بكتابة كود 1مي وإغلاق 


<% 
dim recno 
rs.open "select * from vis_book order by comment desc",mycon,3,3 
If rs.EOF Then 
Response. Write("<b><div align=""center'"'"><font size=5 color=white>Y 


("<ط/><1۷ل/><16٥]/>توجد‏ تعلیقات مسجل بالموقع 


rs.Close 
Set rs = Nothing 
Response.End 
End If 
%<>< 
<% 


فى الكود السابق تم كتابة جملة )٥1م‏ بدون شرط أى لم يشترط 
استقبال قيمة أى متغير من صفحة أخرى لكى يتم تنفيذ جملة tععإم؟‏ 
حيث سيتم تنفيذ الجملة بمجرد الدخول الى هذه الصفحة . 


بعد كتابة جملة †عع[ع8 فسوف نقوم بكتابة اسم الحقل Comme‏ 
داخل الخلية الخاصة بعرض التعليقات وذلك لأننانرغب فى عرض 
محتويات هذا الحقل وبعد ذلك سيتم كتابة الحلقة 50 لكى يتم تحديد البيانات 
ال ا اا ا ا ا 
بصفحة تأكيد الحذف بالطريقة نفسها التى تم إتباعها فى صفحة حذف بيانات 
الطلاب وإليك کود تصمیم جدول عرض التعلیقات متضمنا أکواد ۸8۲ 
وذلك على النحو التالى : 


۱۲ 


ناء الفو افع ال الك وة دات الطاب الدينافيكى 


<% 
dim recno 
rs.open "select * from vis _ book order by comment desc",mycon,3,3 
If rs.EOF Then 
Response. Write("<b><div align=""center"""><font size=5 color=white>Y 


<ط/> <1۷ /> ٤٥١<‏ />توجد تعلیقات مسجلہ بالموقع 
rs.Close‏ 
Set rs = Nothing‏ 
Response.End‏ 
End If‏ 
<Ib></font<</span></p>‏ >% 
</td> </tr> </table> </center></div>‏ 
<div align="center'"">‏ 
<center>‏ 
<table border="2""' cellpadding="0" cellspacing="0" style=" border-collapse:‏ 
collapse" bordercolor="#FFFFFF" width="710" dir="rtl]" id=" AutoNumber6"‏ 
height='"47'">‏ 
<tr>‏ 
<td bgcolor="#2480DB" width="557" align="center" height="25'"'>‏ 
<span lang="ar-eg"><font‏ 
>aîll</b></font></span></tdلFFFFFF'"><b>ğ#"=color‏ 
<td bgcolor="#2480DB" width="149'" align="center" height='"25'"'>‏ 
<span lang="ar-eg"><font‏ 
color="#FFFFFF"><pþ>dj></b></font></span></td>‏ 
</tr> <tr>‏ 
<%odo while not rs.eof%o>‏ 
<td width="557" bgcolor="#A3C4E6" height="22" <font‏ 
color="black'"><CENTER><%=rs("comment")%> </td>‏ 
<td width="149" bgcolor="#DFECES8" height="22" align="center''>‏ 
<font color='"#000080''>‏ 
<span style="font-weight: 700; background-color: #DFECES8">‏ 
<a href="confirm _del.asp?id=<%=rs("ID")%>'"><font‏ 
color="#000080''>dij></font></a></span></font></td>‏ 
</tr>‏ 
<%ors.movenext‏ 
loop‏ 
>% 
</table> </center>‏ 


۳ 


بناء المواقع الإالكترونية ذات الطابع الديناميكى 

بعد القيام بالخطوات السابقة نكون قد انتهينا من تصميم الصفحة 

الأولى والخاصة بعرض التعليقات والآن نحن بصدد إنشاء الصفحة الثانية 

والخاصة بتأكيد الحذف و كود هذه الصفحة هو نفسه كود صفحة حذف 

بيانات الطلاب مع بعض التعديلات البسيطة واختصاراآ للوقت والجهد قم 

بفتح صفحة تأكيد حذف بيانات الطلاب ثم قم بحفظ الصفحة باسم 
confirm_ 9۳‏ تم قم بالتعديل فى التصميم ليظهركما بالشكل التالى : 


هل أنت متأكد من حذف تعليق هذا الزائر؟ 
اسم الزائر البريد الإلكتروئى 


ورا الغا الأشر 


وبعد قيامك بتعديل التصميم قم بالانتقال إلى الوضع 1۲1 ثم قم 
بتعديل اسم الجدول من 1[ںومR‏ إلى kممط_ ۷1s‏ وكذلك ان Action‏ 
الخاص بالصفحة إلى pیه.1ءل_ Confirm‏ بدلا من pءه.ءtءاءD‏ وأيضا 
الروابط التى سيتم الانتقال إليها بعد إجراء عملية الحذف أو إلغاء عملية 
E IT TR EAN CAE‏ 
وإليك الكود بعد التعديل على النحو التالى : 


<% 
id=request.querystring("id") 
if request.servervariables("REQUEST_METHOD")="POST" then 
deletesqI="delete * from vis book where ID=" & id 
set rs=mycon.execute(deletesq1) 
set rs=nothing 
set mycon=nothing 
response.redirect "del comm.asp'"" 
end if 
%< 
<% 
select(SQL="select * from vis_book where ID=" & id 
set rs=mycon.execute(selectSQL) 
%< 
</div> 
<div align="center'"> 


٤ 


بنا الفواقع الك وة دات الظاع الديناميكن 


<center> 
<table border="2"" cellpadding="0" cellspacing="0" style="border-collapse: 
collapse" bordercolor="#FFFFFF" width="710" id=" AutoNumber8" 
height="105'"'> 
<tr> 
<td colspan="2" width="709" bgcolor="#2480DB" height="28'"><b> 
<font color="#FFFFFF'">&n bsp; |iھ هل آنت متأاڪد من حذف تعليق‎ 
sرئازلا>/font<>/b<>/td<‎ 
</tr> <tr> 
<td width="353" align="center" height="22" bgcolor="#A3C4E6'"> 
<font color="#000080'"><b>&nbsp;رئljl‎ pwl</b></font><</td> 
<td width="353" align="center" height="22" bgcolor="#A3C4E6'"'> 
<font color='""#000080'"'>>b>& nbsp /><ط/>البريد الإلڪترونى;‎ 0n t< >/ {d< 
<tr> <tr> 
<td width="353" height="29" bgcolor="#DFECE8'"><font 
color="#000080'"'><CENTER><%=rs("name")%></td> 
<td width="353" height="29" bgcolor="#DFECE8'"><font 
color="#000080'"'><CENTER><%=rs("email")%></td> 
<p></p> <CENTER> <p></p> </td> </tr> <tr> 
<td colspan="2" width="709" height="26" bgcolor="#2480DB" 
align="center''> 
<form method="POST" action="confirm_del.asp?id=<%=id%>" 
dir="rt]'"'> 
<p align="center" dir="rt]"> 
<input type="submit" value=" aفlge‎ '" name="B1'""> 


<input type="reset'" value=" رمأlslëll‎ " name='"B2" 
onclick="FP_ goToURL(/*href*/'del comm.asp')" 
</form> </td> 
</tr> </table> </center> 


تعمل كما الأشكال التالية : 
)١‏ عند فتح : صفحة عرض اأ أتعليقات : 


شکرک على اهتمامكم بتطوير الموقع ډإستىرار حاف 


الوقع ستاز وجزاكم الله خيرا حذف 


۵ 


الا الك هة ذا الاك الافيكين 
( عند الضغط على زر حذف لأحد التعليقات : 


هل أنت متأكد من حذف تعليق هذا الزائر؟ 


اسم الزائر البريد الإلكثرونى 


treham(dQyahoo. com rehatn 


)٣‏ بعد إجراء عملية الحذف سيتم العودة تلقائيا لصفحة عرض 


هو الهدف . 


الموقع ساز وجزاكم الله خيرا حذف 


ثالثا : صفحة تعديل البيانات الخاصة بالطلاب : 
لقد قمنا مسبقا أثناء تصميم الصفحة الخاصة بعرض نتائج البحث عن 

بيانات الطلاب بعمل رابط لتمكين المستخدم من التعديل فى السجل وذلك عن 
طريق ربط كلمة ( تعديل ) بالصفحة مpءه.)اله‏ وهى الصفحة التى نحن 
الآن بصدد إنشائها حيث من خلالها سيتمكن المستخدم من تعديل بيانات 
السجل الذى قام باختياره أى القيام بعملية تحديث لبيانات هذا السجل وللقيام 
بتصميم هذه الصفحة قم بفتح صفحة مءه.ناء_ 4ج والخاصة بإضافة 
طلاب الصفوف ( الأول والثانى والثالث ) ثم قم بحفظها بالاسم ميه.ازلم 
ولقد تم عمل ذلك لكى يتم التعديل فى أكواد هذه الصفحة وجعلها ملائمة 
لعملية تحديث البيانات وسوف يتم التعديل بأكواد هذه الصفحة باتباع 
الخطوات التالية : 
)١‏ فی بیئة التصمیم داخل برنامج eعے۴ ۴٣٥٣٤‏ قم بحذف زر الخيارات 

الخاص بالصف » ثم قم باستبداله ب ×80 ۲٥×‏ عن طریق ۲إع‌یم! › 

ٹم ہ٣٥۴‏ ٭ ثم ٦×٤ 8٥×‏ لیصبح کما بالشکل التالی : 


الصف ا 


٦1 


اء الهو افع الك وة دات الطان الديتافيكى 


۲) قم بالتوجه إلی الوضع ۳1×۷1 وذلك لکی یتم التعدیل فی کرد A۸688۲‏ 
الموجود بالصفحة حيث سيتم تعديل هذا الكود من إضافة البيانات إلى 
كود لتعديل البيانات . 

۳) قم بحذف الجملة التالية من بداية الكود . 


if request.servervariables('"'REQ UEST_METHOD")="POST'" then 


. قم بكتابة الجملة التالية بدلا منها‎ )٤ 
id=request.querystring("'id") 
من الكود السابق يلاحظ أننا سوف نعتمد فى التعديل على 5[ الخاص‎ 
. بالسجل لذلك تم كتابة الجملة السابقة داخل الكود‎ 
بعد قيامك بكتابة الجمل السابقة لاحظ أننا سنترك هذا الجزء من الكود‎ )٥ 
: بدون حذف أو تعديل والموضح على النحوالتالى‎ 


dim name,num,saf,ara,math,eng,deen,act1,act2,tot 
name=request.form("'name'"") 


num=request.form("num") 
saf=request.form(""saf") 
ara=request.form(""ara") 
math=request.form("'math"") 
eng=request.form("eng") 


deen=request.form(""deen") 


act1=request.form(""act1") 

act2=request.form("'act2") 

tot=request.form("'tot'") 

if request.servervariables('"REQ UEST_METHOD")="POST'" then 

if name<>"" and num<>""" and saf<>"" and ara<>'"" and math<>'""" and 
eng<>"" and deen<®'"" and act1<'"" and act2<>"" and tot<>""" then 


ومن الملاحظ من سطور الكود السابق أنه عبارة عن إعلام عن 
المتغيرات الموجودة لدينا ويمكنك أيضا ملاحظة وجود جمل 1۴ فى نهاية 
الد هالخ ن فر ها با ف ف من كل هد الكمل كا ان 
ال ×0ط t×م)‏ الذى نرغب فى أن تكون القيم الموجودة به إجبارية أى لا 
يمكن للقائم بعملية تعديل البيانات استكمال هذه العملية بدون كتابة بيانات 


1۷ 


ا ف اا فة ا فاا اتاك 


داخل ال ×ط ×م) المكتوب اسمه داخل سطور الكود وفى مثالنا هذا قد قمنا 
بكتابة جميع الاسماء حيث إننا نرغب فى أن تكون جميع البيانات إجبارية 
أى لا يمكن للقائم على عملية تعديل البيانات ترك هذه المربعات فارغه أو 
القيام بحذف أحد عناصرها دون كتابة بديل لما تم حذفه . 


)٦‏ بعد أن يتم التأكد من أن جميع مربعات النص ممتلئة فمن المفترض أن 
یتم اعتماد عملية تحديث البيانات أى يجب كتابة كود لكى يقوم بعملية 


. ۰ 


تحديث البيانات وكذلك يجب كتابة نص معين لكى يظهر عند إتمام عملية 


تحديث البيانات وكذلك نص لكى يظهر عندما لا تتم عملية التحديث 
بنجاح ولعمل ذلك قم بكتابة كود تحديث البيانات على النحو التالى : 


updatesql="update result1 set 
Name='""&name&'"""',Num='"&num&'""',saf='"&saf&'"",Ara='"&ara&'"",Math='" 
&math&'""',Eng='"&eng&'""',Deen='"&deen&'""",Act1='""&act1&'"", Act2='"" &act2 
&"",Tot='""&tot&'""'" where ID=" & id 

set rs=mycon.execute(updatesq1) 

response.write "<center><b><font color=blue> Jيدعتلا تم حفظز‎ 


حlجiڊ</font><</b></center>"‎ 


else 

عفوا تأاڪد من آن قد قمت بملء جع response.write "<center><b><font c010r=r¢d>‏ 
">font<>/b<>/center/>الحقول‏ 

end if 

end if 


N TT TT TTT 
ل وا کا ی ا و‎ 
فا کا ا ا تكك ابات ك ا كن ر‎ 
" وقد قمنا بكتابة جملة " عفواً تأكد من أنك قمت بملء جميع الحقول‎ 
. 1۴ عندما يتم إجراء أی شىء يخالف جملة‎ 


۸ 


بنا العو اق آلالكم وة دات الظان الديناموكص 

۷) نحن الآن فى خطوة فى منتهى الأهمية وهى الخطوة الخاصة بطباعة 
مختوبات الكل داخل مرسات التص عد الط على كلمة (تعدل) 
قد الط عل هذ اكلم فمن ال ك آنا بحا ال اعا مراك 
السجل الذى تم اختياره داخل مربعات النص لكى يتم تعديلها . ولعمل 
ذلك نجد أننا بحاجه إلى كتابة جملة {ءم][م؟ لكى يتم تحديد البيانات 
الخاصة بالسجل الذى تم اختياره وإليك الكود الخاص ب اءعاء؟S‏ 
على النحو التالى : 


selectSQL="select * from result1 where ID=" & id 
set rs=mycon.execute(selectSQL) 


<> 
بعد كتابة كود {ءم[م$ نجد أننا بحاجة إلى كتابة أسماء الحقول التى 
سيتم طباعة محتوياتها داخل مربعات النص فعلى سبيل المثال لكى تقوم 
بطباعة محتويات مربع النص الخاص باسم الطالب قم بالضغط على 
مربع النص بالزر الأيمن للماوس ثم قم باختيار 
<%(""rs("naı€=%> ةبlتSڊ pê pû Form Field Properties‏ 
داخل القيمة الإفتراضية لمربع النص (عںآه۷ 1ها†آہ) حيث سيظهھر 
الكل اتاق امرجم التسن ال ر مالسد اروت به 
على النحو التالى : 


| "ral" natte= iz اسم الطالب‎ 


بعد ذلك على نفس النهج قم بإجراء نفس الطريقة على باقى مربعات 
النلص ولكن مع تغيير اسم الحقل واليك كود الجدول بما يحتويه من أسماء 
لن ف ااال 


center> 
<table border="2" cellpadding="0" cellspacing="0" style="border-collapse: 


collapse" bordercolor="#FFFFFF" width="517" dir="rtl]" id=" AutoNumber6"" 
height="277"> 
<tr> 


۴۹ 


ا ا فة اة الافكن 


<td bgcolor="#A3C4E6" width="513" height="27" align="center" 
colspan='""2'""> 
<p align="center'"'><span lang="ar-eg"><font size='"4" 
color="#000066''><b> 
/><ط/>البیانات الأساسیت للطالب‎ fon t<>/spa n< >/ d< 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center'"><b>&nbsp; pl 
<ل)/><(/> الطالب‎ 
<td bgcolor="#DFECES8" width="246" height="27"'> 
<p align="center'"'> 
<input type="text" name="name'"" size="40" 
value="<%=rs('name")%>'""></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center'"><b> &nbspص;‎ pa) 
<ل)/><(/>الجلوس‎ 
<td bgcolor="#DFECES8" width="246" height='"27"'> 
<p align="center'"> 
<input type="text" name="num"" size="40" 
value="<%=rs("num")%>'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center''><b>&n bsp; الصف‎ 
</b></td> 
<td bgcolor="#DFECES8" width="246" height="27"'> 
<p align="center''> 
<input type="text" name="saf"" size="40" value="<%=rs(""saf")%>'""></td> 
</tr> 
<tr> 
<td bgcolor="#A3C4E6" width="513" height="28" colspan='"2'""> 
<p align="center'""><font color='"'#000066'" size='""4'"'><bþ>& nbsp; lak درجاٽ‎ 
/><ط/> الدراسیہ‎ ont >/ {d< 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><b>&n bsp; éخغلdلiا‎ 
<ل)/><(/> العرييی‎ 
<td bgcolor="#DFECES8" width="246" height='"28'"'> 
<p align="center'"> 
<input type="text" name="ara" size="20" 
value="<%=rs("'ara")%>'"'></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center ''><b> & الرياضياٽت ;۲غ1‎ 
</b></td> 


1٤۰ 


اء الفة اق آل الك وة دات الطات الدينافيكى 


<td bgcolor="#DFECE8" width="246" height="28''> 
<p align="center''> 
<input type="text" name="math"" size="20" 
value="<%=rs("math'")%>'""></td> 
<ltr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><b>&nbspص;éخغلdلiا‎ 
<ل)/><(ط/>الإنجلیزيړ‎ 
<td bgcolor="#DFECES8" width="246" height="28'""> 
<p align="center'"> 
<input type="text" name="eng" size="20" 
value="<%=rs("eng")%>'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><b> &nbspص;vrييرتلا‎ 
<ل)/><(ط/>الدینیړ‎ 
<td bgcolor='"#DFECE8" width="246" height="28''> 
<p align="center'"> 
<input type="text" name="deen"' size='"20" 
value="<%=rs("deen'")%>'""'></td> 
<ltr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><bþ>& nbsp; bli 
(1)</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'""> 
<p align="center'"> 
<input type="text" name="act1" size="20" 
value='"<%=rs('act1")%>'"'></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><bþ>& nbsp; bli 
(2)</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"> 
<p align="center'"> 
<input type="text" name="act2" size="20" 
value='"<%=rs('act2")%>'"'></td> 
<ltr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"><b>&nbsp;عوaجdkl‎ 
الكلىی‎ >/ط<>/)d<‎ 
<td bgcolor="#DFECES8" width="246" height="28'""> 
<p align="center'"> 
<input type="text" name="tot" size="20" value='"<%=rs("tot")%>'""></td> 
</tr> </table> </center> 


1٤١ 


لاف الك وة داطالطااح اتد اف 
۸) قم بتغيير ال ١٥1ء۸‏ الخاص بالصفحة : 
<%delete.asp?14=<%=1d ja‏ 
<%edit.asp?id=<%=id ١l‏ . 
قم بتغيير اسم زر ( حفظ البيانات ) إلى الاسم ( تحديث البيانات ) وكذلك 
قم بتغيير اسم زر ( تفريغ الحقول ) إلى الاسم ( إلغاء الأمر) ثم قم 
بربطه بصفحة مءه. Ww‏ ۷1_طء۲هم6 بنفس الطريقة السابق ذكرها . 
عضن ألقام بالخظرات السايقة تخد أنك لذيك فة اتعديل بيانات 
الصفوف ( الأول والثانى والثالث ) وإليك كود ۸5۴ الخاص بالصفحة 
ع کو 


<% 

id=request.querystring("'id"") 

dim name,num,saf,ara,math,eng,deen,act1,act2,tot 
name=request.form('name"") 

num=request.form("num'"") 

saf=request.form(""saf") 

ara=request.form(""ara") 

math=request.form("'math") 

eng=request.form("eng") 

deen=request.form("deen"") 

act1=request.form(""act1") 

act2=request.form("'act2") 

tot=request.form("'tot'") 

if request.servervariables('"'REQ UEST_METHOD")="POST" then 

if name<>"" and num<>""" and saf<>"" and ara<>'"" and math<>'""" and 
eng<>"" and deen<®'"" and act1<>'"" and act2<>"" and tot<>""" then 


updatesql="update result1 set 
Name='""&name&'""',Num='"&num&'""',saf='"&saf&'"",Ara='"&ara&'"",Math='" 
&math&'"'",Eng='""&eng&'"",Deen='"&deen&'""",Act1='""&act1&'"", Act2='"" &act2 
&"",Tot='""&tot&'""" where ID=" & id 

set rs=mycon.execute(updatesq1) 

response.write "<center><b><font color=blue> Jيدعتلا تم حفظ‎ 


حlجiڊ</font><</b></center>"‎ 


else 


٤۲ 


ناء الفو افع آل الك وة دات الطاب الدينافيكى 


عفواتأاڪد من آن قد قمت بملء جع response.write "<center><b><font c010r=red>‏ 
">font<>/b<>/center/>الحقول‏ 
end if‏ 


end if 

selectSQL="select * from result1 where ID=" & id 
set rs=mycon.execute(selectSQL) 
>< 


الكود السابق هو كود ۸6۴ الخاص بتحدیث البيانات وتحدید البيانات 
التى نرغب فى عرضها داخل مربعات النص و يجب مراعاة كتابة 
هذا الكود قبل الكود الخاص بالجدول الذدى سيتم عرض البيانات به . 

وبذلك نكون قد انتهينا من إنشاء صفحة pءه.)1لء‏ والخاصة 
بتعديل بيانات طلاب ( الصفوف الأول والثانى والثالث ) والآن نحن 
بحاجة إلى إنشاء صفحة موه.1112ء والخاصة بتعديل بيانات طلاب 
لشن راان و ك ف ا هن الك افا ي 
ملاحظة تغيير أسماء الجداول الموجودة فى جملتى ماهلماU‏ و Select‏ 
وذلك من 11 ںءع؟ إلى 2٤u1ومع‏ وكذلك ال م٥۸1‏ الخاص بالصفحة من 
%edit.asp id =< = d‏ > إلى >%edit2.asp?14=>%=14‏ وكذلك 
نت كا اء انعر لضا (الحقرل اتخات مدت الك 
والدراسات) بجملة ململ وكذلك أيضا تغيير الرابط الخاص بزر (إلغاء 
الأمر) وإليك كود ۸8۴ الخاص بصفحة موه.2٤81‏ على النحو التالى : 


<% 

id=request.querystring("'id"") 

dim name,num,saf,ara,math,eng,deen,olom,stu,act1,act2,tot 
name=request.form("'"name'"") 

num=request.form("num") 

saf=request.form(""saf") 

ara=request.form(""ara") 


math=request.form("'math"") 
eng=request.form("eng") 
olom=request.form(""olom") 
stu=request.form("'stu'"") 
deen=request.form("deen") 
act1=request.form("'act1") 


٤۳ 


الاکن 


act2=request.form("'act2") 

tot=request.form("'tot'") 

if request.servervariables('"REQ UEST_METHOD")="POST" then 

if name<>'""" and num<>"'"" and saf<>"'" and ara<>"" and math<>""' and 
eng<>"" and olom<>="" and stu<>"" and deen<>"'"" and act1<>'"" and act{2<>'"" 
and tot<>""" then 

updatesql="update result2 set 
Name='"&name&'"""',Num='"&num&'""',saf='"&saf&'"",Ara='"&ara&'""",Math='" 
&math&""',Eng='" &eng&'"',Olom='" &olom&'"",Stu='" &stu&'""",Deen='" &deen 
&""Act1=""&actl&"',Act2='" &act2&'""',Tot='" &tot&'""' where ID=" & id 

set rs=mycon.execute(updatesq1) 

response.write "<center><b><font color=blue> Jيدعتلا تم حفظز‎ 
حlجiڊ</font><</b></center>"‎ 

else 

عفوا تأڪد من أن قد قمت بملء جع response.write "<center><þ><font c010r=red>‏ 
center>"‏ /><f]ont<>/b/>الحقول‏ 


selectSQL="select * from result2 where ID=" & id 
set rs=mycon.execute(selectSQL) 
%< 


وإليك الكود الخاص بالجدول الذى يحتوى على مربعات النص 
رلك غلى الت اتالن* 


</center> 
</div> 
<form method=" POST" action="edit2.asp?id=<%o=id%>'"'> 
<div align="center''> 
<center> 
<table border="2"' cellpadding='"0'" cellspacing="0" style="border-collapse: 
collapse" bordercolor="#FFFFFF" width="517" dir="rtl]" id=" AutoNumber6" 
height="277"'> 
<tr> 
<td bgcolor="#A3C4E6" width="513" height="27" align="center" 
colspan='"2''> 
<p align="center'"><font color="#000066" size="4'"><b>&nbsp; 
>sp21 141 g="' 2 ۲-eg'"'<بلاطلل الأساسيت‎ تانايبلا>/spمan<>/ط<>/‎ fon t< >/t d< 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center'"><b>&nbsp; pl 
<ل)/><(/> الطالب‎ 
<td bgcolor="#DFECES8" width="246" height="27"'> 


٤٤ 


با الفة اف ال الك وة اة الات الديافيكى 


<p align="center''> 
<input type="text" name="name" size="40" 
value="<%=rs("name")%>'""></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center'"><b> &nbspص;‎ pa) 
<ل)/><(/>الجلوس‎ 
<td bgcolor="#DFECES8" width="246" height="27"'> 
<p align="center'""> 
<input type="text" name="num" size="40" 
value="<%=rs("'num")%>'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="27" 
align="center''><b>&n bsp; الصف‎ 
</b></td> 
<td bgcolor="#DFECES8" width="246'" height="27"'> 
<p align="center'"> 
<input type="text" name="saf" size="40" value="<%=frs("saf'")%o>'""></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="513" height="28" colspan='"2'""> 
<p align="center'"><font color='"#000066'" size='""4'"'><bþ>& nbsp; داgkl درجات‎ 
/><ط/> الدراسیہ‎ ont >/ {d< 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><bþ>&n bsp; éخغلdلiا‎ 
<ل)/><(/> العرييی‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"> 
<input type="text" name="ara" size="20" 
value="<%=rs("ara")%>'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center ''><b> &1ۆ:p; الرياضياٽ‎ 
</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"> 
<input type="text" name="math" size="20" 
value="<%=rs("math")%>'"></td> 
<ltr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><b>&n bsp; éخغلdلiا‎ 
<ل)/><(/>الإنجلیزیہ‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"'> 


1٤۵ 


EN‏ الاکن 


<input type="text" name="eng" size="20" 
value="<%=rs("'eng")%>'""></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" align="center'"'> 
<span lang="ar-eg'"><bþ>pglall</b></span></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"> 
<input type="text" name="olom" size="20" 
value='"<%=rs("olom'")%>'"></td> 
</tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" align="center'""> 
<span lang="' ar-eg'"><b>yvacامتجإلا‎ تاساردلا>/b<>/spa‎ n< >/ {d< 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"> 
<input type="text" name="stu" size="20" value="'<%=rs("'stu'")% >'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center''><b> &n bsp; vrييزرتلا‎ 
<ل)/><(ط/>الدینیړ‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"> 
<input type="text" name=" deen" size="20" 
value='"<%=rs("deen")%>'""></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><bþ>& nbsp; bli 
(1)</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"> 
<input type="text" name="act1" size="20" 
value="<%=rs("act1")%>'""'></td> 
<ltr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"'><b>& nbsp; bli 
(2)</b></td> 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'""> 
<input type="text" name="act2" size="20" 
value="<%=rs("act2'")%>'"'></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" width="267" height="28" 
align="center'"><b>&nbsp;عوaجdkl‎ 
<ل)/><(ط/> الكلى‎ 
<td bgcolor="#DFECES8" width="246" height="28'"'> 
<p align="center'"> 


٤٦ 


بنا الفواقع آ[الكم وة دات الظاع الديداميكن 


<input type="text" name="tot" size="20" value="<%=rs("tot")%>'"></td> 
</tr> </table> </center> </div> 
<p align="center'"><input type="submit" value=" تانlيبll "'تحديٹ‎ nam e='"' B1 ''< 
<input type="reset" value=" رمأllslëll‎ " name="B2" 


onclick="FP_ goToURL(/*href*/'search_view2.asp')" <br><br> 
&nbsp;</p> <br <br>&nbsp;</p> 

</form> 

</td> </tr> </table> </center> 


ثالثا : صفحة طباعة بيانات الطلاب : 

الطلاب حيث سيتم عرض بيانات ونتيجة الطالب الذى تم اختياره من خلال 
الفح الخاضة برضن الدانات. كان وة ي اة اة 
بالطباعة فسوف نقوم بإنشاء صفحة خالية من أى تأثيرات أو خلفيات أو 
ألوان أى سنقوم بإنشاء صفحة بيضاء اللون ولعمل ذلك قم بالاتجاه إت 
قائمة ۴11٥‏ » ثم اختر الأمر سه »ثم قم بتسمية الصفحة بالاسم 
Print st .9p‏ ۰ تم قم بادراج جدول مکون من عمودین و۱۲ صف ۰ ثم 
قم بكتابة الكلمات الاسترشادية للبيانات التى سيتم إظهار ها بداخل الجدول 
وذلك كما بالشكل التالى : 


ادات الأساسية للطالب 


ا 1 ا 
درجات الصواد الدراسية 


— ۷ 


بناء المواقع الإلكترونية ذات الطابع الديناميكى 
وإليك الكود الخاص بتصميم الجدول على النحو التالى : 


<center> 
<table border="3'" cellpadding="0" cellspacing="0" style="border-collapse: 
collapse" bordercolor="#C0C0C0" width="522" id=" AutoNumber4" 
height='"310'""> 
<tr> 
<td width="515" bgcolor="#C0C0C0"' colspan="2" height='"30'"'> 
<p align="center'"><span lang="ar-eg"><font size='"4" 
color="#000066''><b> 
/><ط/>البیانات الأساسیت للطالب‎ fon t<>/spa n< >/ t< 
<tr> <tr> 
<td width="258'" height='"30'""> 
<p align="right'"'><pþ><span lang="ar-eg'"><font size="4'">&nbsp;&nbsp; pul 
الطالب‎ >/ ont >/span<>/b<>>/ {d< 
<td width="258" height="30'">&nbsp;</td> 
<tr> <tr> 
<td width="258" height='"30'"> 
<p align="right'"><bþ><font size="4">&nbsp; &nbsp; Fadl </font<</b></td> 
<td width="258" height="30'">&nbsp;</td> 
<tr> <tr> 
<td width="258'" height='""30'""> 
<p align="right"><b><font size="4">&nbsp;&nbsp; p۾¶)‎ 
سولجلا>/fon<>/ط<>/td<‎ 
<td width="258" height="30'">&nbsp;</td> 
</tr> <tr> 
<td width="515" bgcolor="#C0C0C0" height="31" colspan="2'""> 
<p align="center'"><font color="#000066'" size='"4'"'><þ> 
<span style="background-color: #C0C0C0'">& nbsp; alkl درجات‎ 
rیساردلا‎ >/span< /><ط/>‎ font >/ {d< 
<tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size='"4'">&nbspص;ékغلdlا‎ 
العرییہٰ‎ >/ont< >/ط<>/)d<‎ 
<td width="258" height="31'">&nbsp;</td> 
</tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"'><b><font size='""'4'"'>& nbsp ;تlضا|يرلا‎ >/ on 
</b></td> 
<td width="258" height="31'">&nbsp;</td> 
<tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size='"4'">&nbspص;ékغلdlا‎ 
Mیزیلجنإلا>/‎ fon >/b<>/td< 


٤۸ 


اء الفة اق آل الك وة دات الطايت الدينافيكى 


<td width="258" height="31'">&nbsp;</td> 
</tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size='"4'">& nbsp: الترزبي‎ 
rینیدلا>/font<>/b<>/)d<‎ 
<td width="258" height="31">&nbsp;</td> 
</tr> <tr> 
<td width="258" height='"31'""> 
<p align="right'"><b><font size="4">&nbsp; bli 
(1)</font<</b></td> 
<td width="258" height="31'">&nbsp;</td> 
</tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size="4">&nbsp; bli 
(2)</font<</b></td> 
<td width="258" height="31">&nbsp;</td> 
<tr> <tr> 
<td width="258'" height='"31'"> 
<p align="right'"><b><font size="4'">&nbspص;عğوaجdkl‎ 
الكلى‎ >/font< >/b<>/td< 
<td width="258" height="31'">&nbsp;</td> 
</tr> </table> </center> 


بعد قيامك بإنشاء الجدول قم بكتابة أوامر اللغة الخاصة بالصفحة 
وكذلك أمر احتواء صفحة Connection.asp‏ وذلك علی النحو التالى : 


والآن سنقوم بكتابة كود ٤٥م[م8S‏ حتى يتم تحديد البيانات المطلوبة 
من الجدول 11ں وء وذلك على النحو التالى : 
%< 


id=request.QueryString(""'id") 
selectSQL="select * from result1 where ID=" & id 


set rs=mycon.execute(selectSQL) 
< 


۹ 


ك ا الاک 


شرح الكڪود 
فى بداية الكود قمنا بالتعريف بالمتغير ([1 وذلك موضح 
بالکود کالتالی : 
id=request.QueryString("'id")‏ 
بعد ذلك قمنا بكتابة جملة )ءع1ع؟ والتى عن طريقها سيتم تحديد 
البيانات من الجدول [٤1‏ ںوه] وسوف يتم تحديد البيانات حسب ال [5D‏ أى 
حسب رقم السجل الذى تم اختياره من قبل المستخدم وذلك موضح بالكود 
کالتالی : 
selectSQL="select * from result1 where ID=" & id‏ 
بعد ذألك قمنا باعطائه أمر بالتنفيد ¢ ی تنفيد جملة غSelec‏ 
وذلك موضح بالکود کالتالی : 
set rs=mycon.execute(selectSQL)‏ 
وبعد قيامك بكتابة الكود السابق قم بكتابة أسماء الحقول التى ترغب 
فى أن تظهر داخل خلايا الجدول وذلك على نفس النهج الذى تم ذكره مسبقا . 
فعلى سبيل المثال قمنا بكتابة >%)'۲١)"14۳0=%<‏ داخل الخلية المقابلة 
لخلية اسم الطالب وإليك الكود الخاص بالجدول متضمنا أسماء الحقول 
وذلك على النحو التالى : 


<center> 
<table border="3'"" cellpadding="0" cellspacing="0" style=" border-collapse: 
collapse" bordercolor="#C0C0C0" width="522" id=" AutoNumber4" 
height='"310'"> 
<tr> 
<td width="515" bgcolor="'#CO0C0C0" colspan="2" height='"30'"'> 
<p align="center'"><span lang="ar-eg"><font size='"4" 


color="#000066''><b> 
/><ط/>البیانات الأساسیت للطالب‎ fon t<>/spa n< >/ d< 
</tr> <tr> 
<td width="258" height='"30'""> 
<p align="right'"'><pþ><span lang="ar-eg'"><font size="4'">&nbsp;&nbsp; pul 
الطالب‎ >/ font >/span<>/b<>>/ {d< 


10۰ 


با الفة افع آل الك وة دات الطاب الدينافيكى 


<td width="258" height="30" align="center'"><font 
size="4'"><%=rs("name")%></td> 
<tr> <tr> 
<td width="258'" height='"30'"> 
<p align="right'"><b><font size="4">&nbsp;&nbsp; Fadl </font<</b></td> 
<td width="258" height="30" align="center"><font 
size="4'"><%=rs(""saf")% ></td> 
<ltr> <tr> 
<td width="258'" height='"30'""> 
<p align="right"><b><font size="4">&nbsp;&nbsp; p۾¶)‎ 
سولجلا>/fon<>/(<>/td<‎ 
<td width="258" height="30" align="center'"><font 
size="4"><%=rs("num")%></td> 
<ltr> <tr> 
<td width="515" bgcolor="#C0C0C0" height="31" colspan="2'""> 
<p align="center'"><font color="#000066" size='"4''><b> 
<span style="background-color: #C0C0C0'">& nbsp; داkl درجات‎ 
Mیساردلا‎ >/span< /><ط/>‎ font >/ {d< 
<tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size='"4'">&nbspص;ékغأdlا‎ 
العرییت‎ >/fo „t< >/ط<>/)d<‎ 


<td width="258" height="31" align="center'"><font 
size="4'"><%=rs("ara")%></td> 
</tr> <tr> 


<td width="258" height='"31'"> 
<p align="right'"><b><font size='""4'">& nbsp الرياضيات:;‎ >/font< 
</b></td> 
<td width="258" height="31" align="center'"><font 
size="4'"><%=rs("math")%></td> 
</tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size='"4'">&nbspص;ékغلdlا‎ 
rیزیلجنإلا>/font<>/ط<>/td<‎ 
<td width="258" height="31" align="center'"><font 
size="4'"><%=rs("eng")%></td> 
</tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size='""4'">& nbsp: الترزبي‎ 
Mینیدلا>/font<>/b<>/)d<‎ 
<td width="258" height="31" align="center'"><font 
size="4'"'><%=rs("deen")%></td> 
</tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size="4">&nbsp; bli 


1۵۱ 


ا ا ا اة الافكن 


(1)</font></b></td> 
<td width="258" height="31" align="center'"><font 
size="4'"><%=rs("act1")%></td> 
</tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><b><font size="4">&nbsp; bli 
(2)</font<</b></td> 
<td width="258" height="31" align="center'"><font 
size="4'"><%=rs('act2")% ></td> 
</tr> <tr> 
<td width="258" height='"31'"> 
<p align="right'"><font size="4'"><b>gغ‎ وaجفkl‎ 
<ل)/><(ط/> الكلى‎ 
<td width="258" height="31" align="center"><%=rs("'tot")%o></td> 
</tr> </table> </center> 


بعد قيامك بعمل الخطوات السابقة یتبقی لنا فی الکود الخاص ب A۸68۲‏ 
إنهاء الاتصال أى إنهاء خدمة وع و مصهء و ذلك على النحو التالى : 


set rs=nothing 
set conn=nothing 
%>< 


وبعد الانتهاء من كتابة كود ۸8۲ سنجد أننا بحاجة إلى عمل زر 
لكى يتم طباعة البيانات ولعمل ذلك يمكنك كتابة كود بلغة الجافا سكريبت 
وذلك النحو التالى : 


<script language=" javascript''> 

function printerX(0{ 

) (('"'هل تود طباعہٰ نتیجہٰ هذا الطالب'' ۴1۲٣١)‏ ہ٥ء)‏ 
window.print0;‏ 

} else 

;( "تم رفض أمرالطباعة 11٥۲)"‏ 


1 

</script> 

<form name="printer'"> 

<p align="center''> 

<input type=button name='prin(X' value='éچağiill‎ vعlطb‎ ' onclick="printerX(0'""> 
</p> 

</form> 


10۲ 


بنا الغو اق الك وة اة الظان اللا خی 

اض هن الود اعا افا ف فن كا كرح لاا كر فت 
موضحا أنه عندما يتم الضغط على زر (طباعة النتيجة) ستظهر رسالة 
مضا فل كرد اع ةه الطاب فاا فا الم كن ااه 
فسوف يتم إظهار مربع الحوار الخاص بالطباعة أما إذا لم يتم التأكيد 
فسوف تظهر رسالة تخبره بأن أمر الطباعة تم رفضه . 

وبعد عمل الخطوات السابقة يمكنك الآن تجربة رابط (طباعة) 
الموجود بصفحة pیshow_stu.a‏ . 

والآن نحن بحاجة إلى إنشاء صفحة الطباعة الخاصة بطباعة 
نات ر حه ات الضفن الراتع والخاس زى هو الس فة نكاد 
زيادة عدد الصفوف بمقدار صفين وذلك حتى نتمكن من عرض 
ترخات مات انت والةر اعات رتل ذلك ق فة الس فة اا 
بالاسم pءه.٤tudenء_in12م‏ بعد ذلك قم بوضع مؤشر الماوس فى 
الصف الخاص بمادة اللغة الإنجليزية » ثم قم بالاتجاه إلى قائمة مإاه1 › 


* 


ثم اختر الأمر ٤اموم]‏ › ثم اختر وہںuاہC‏ 0۲ ۸٥W‏ فسوف یظھر مربع 
حوار من خلاله قم باختيار الخيار R0 ws‏ › ثم قم بكتابة عدد ۲ بجانب 
Number of rows‏ › ثم قم باختıار Below Selection‏ وذلك 
كما بالشكل التالى : 


Insert Rows or Lolumns 23 ۶%) 


* Roms f Lolumns 


Murmber of roms: 2 ا‎ 


Location: 


` Above selection 


# Below selection 


ane | 


10۲ 


بناء المواقع الإلكترونية ذات الطابع الديناميكى 
وبعد عمل الخطوة السابقة ستجد أنه تم زيادة عدد الصفوف إلى صفين قم 
بكتابة اسماء المواد الدراسية فى الصفين ثم قم بالانتقال إلى الوضع H۲11‏ 
ثم قم بكتابة أسماء الحقول داخل الخلايا الخاصة بالصفين الجدد وإليك كود 
الطفن الحدد متضفةا اسماء الحقرل الحفدة وذلك فلي الخ التالى ٠‏ 
<tr> <td width="258" height='"31''>‏ 

<font size="4'"'><þ>&nbsp;<span lang="ar- 
eg">pglaldl</span></b></font> </td> 

<td width="258" height='""31'"> 


<p align="center"> <font size="4'"><%=rs("olom")%></font></td> 
</tr> <tr> 


<td width="258" height="31''> 

<span lang="ar-eg'"><font size='""4'"><bþ>&n bsp; الدراسات‎ 
rيعامتجإلا>/b<>/‎ font >/spa n> </td> 

<td width="258" height="31" align="center"> <font 
size="4'"><%=rs("'stu")% ></td> 


وبعد إجراء التعديل السابق قم بالاتجاه إلى جملة {ءع[ع8 الموجودة 
بكود ۸8۲ تم قم بتغيير اسم الجدول من u[1ومR‏ إلى u[)2ومR‏ وذلك ؛ 
لأن عملية عرض البيانات والنتيجة فى هذه الصفحة تخص الجدول 
Result2‏ . 

کی ا ت ا اغا انات 


10٤ 


القصل السابع 
إنشاء صفحات النصويت الإالکترونى 


ا ااك فة 6 اة اتناك 


الفصل السايح 
انشاء صفحات التصویت الإلکترونى 

أولاً : تعريف التصويت الإلكترونى : 

التصويت الإلكترونى : هو التعبيرالذدى يشمل كل الوسائل الإلكترونية 
لاتصويت والوسائل الإلكترونية لحساب الأصوات. 
ثانیا : إنشاء صفحة التصويت : 
تصويت إلكترونى أى سيتم إدخال الأصوات وحسابها إلكترونيا وذلك عن 
طريق أکواد (۸8۲) فلكى نتمكن من عمل ذلك لابد من إنشاء جدولين داخل 
قاعدة البيانات الموجودة لدينا حيث سنقوم بإنشاء جدول اسمه ع۷0 وسوف 
يختص هذا الجدول بتخزين الأصوات التى سيتم استقبالها وكذلك تخزين 
ال 1۲ الخاص بجهاز الشخص الذى قام بالتصويت حتى لايتمكن من 
التصويت مرة أخرى وسوف نقوم أيضا بإنشاء جدول اسمه (011م) فمن 
التو وات أا الل الخاكة الول ماو ۷ غ الكو الا > 


اسم الحقل نوع البيانات وصف الحقل 
Auto number ID‏ ترقیم تلقائی 

Text IP‏ الآى بى 
Number Selection1‏ الخيار الأول 
Number Selection2‏ الخيار الثانى 
Number Selection3‏ الخيار الثالث 
Number Selection4‏ الخيار الرابع 
Date\Time entered‏ وقت وتاريخ 


1۵7٦ 


بثاء الفواقع الك وه ة دات الظاع الديناميكن 


El vote : [able 


E Field arme 
EE 


ûutollurmber 


| ip Text 

| jselertion1 Number 

| jselerkionz Number 

| FÎ selerkion3 Number 

| jselerktion4 HMurmnber 

| entered Date/Time 


أثناء قيامك بإنشاء الجدول داخل قاعدة البيانات يجب مراعاة أن تكون 
Value‏ tاefau(‏ لكل حقل من حقول الخيارات الأربعة هى ( 0 ) 
واآ hefault Value‏ للحقل ente]‏ هى =Now()‏ . 

بعد الانتهاء من تصميم الجدول ع۷0 قم بإنشاء الجدول ۴٥11‏ وإليك 
أسماء الحقول الخاصة به على النحو التالى : 


ETS EEE NT 
ترقیم تلقائی‎ Auto number ID 
سوال الإستفتاء‎ Text qu 
الخيار الأول‎ Text Select1 
الخيار الثانى‎ Text Select2 
الخيار الثالث‎ Text Select3 
الخيار الرابع‎ Text Select4 


Bl poll : Table 


E Field Name 
BSE 


ııtofJumber 
E لا‎ Text 
SEEM Text 
EE Text 
1 selert3 Text 
| selert4 Text 
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بناء المواقع الالكتر ونية ذات الطابع الديناميكى 

أثناء قيامك بإنشاء الجدول داخل قاعدة البيانات قم بتغيير حجم الحقل 

)۴١14 S1۵(‏ الخاص بالحقل سي إلى " ٠٠١‏ " و بعد قيامك بإنشاء 
الجدول قم بفتحه تم قم بوضع البيانات التالية بداخله : 


اسم الحقل البيانات 
qu‏ ما هو رأيك فى مستوى التعليم بعد ثورة يناير المجيدة ؟ 
Select1‏ ممتاز 
Select2‏ جید جداً 
Select3‏ جید 
Select4‏ غير لائق بمستوى مصر بعد الثورة 
E poll: Table‏ 
id 0 select selecta select3 select4‏ 
غي لائ باستو مص بعد الورة جد جید جدأً مسئاز | ما هو رأيك فى مسئوى التطيم بعد تورة ينابر المجبدة ؟ |1 


وبعد الانتهاء من إنشاء الجداول الخاصة بالتصويت الإلكترونى قم 
ا ا ات ا ف ا اا وا ق کصمهعا من قل ف 
بحفظها باسم مءه.ع)۷0 وبعد حفظ الصفحة قم بالاتجاه إلى قائمة ٤عوم]‏ › 
ثم اختر ۴٥٣٥‏ › ثم اختر ہ٥ااuاB8‏ ۸٥1ام0‏ ( زر خیارات ) ستجد آنه تم 
إدراج زر الخيارات كما بالشكل التالى : 


قم بوضع المؤشر بجانب زر )یع۸ تم قم بإدراج جدول مكون من 
سيظهر شكل الجدول كما بالشكل التالى : 


بناء المواقع الإلكترونية ذات الطابع الديناميكى 
قم بالضغط على زر الخيارات مع السحب إلى الصف الثانى من الجدول 
المدرج وكذلك قم بحذف زر اعومR‏ › ثم قم بالضغط على زر Submit‏ 
مع السحب إلى الصف الأخير من الجدول المدرج » ثم قم بتغيير اسمه إلى 
(تصویت ) › ثم قم بإدراج Button‏ nہo٥0pti‏ عن طریق قائمة ٤eیہ!آ‏ 
فى باقى الصفوف ماعدا الصف الأول حيث سيظهر شكل الجدول كالتالى : 


ويمكنك ملاحظة الفراغ فى الصف الأول حيث إننا تركنا هذا الصف 
فارغا لأن السؤال الخاص بالتصويت سوف يتم طباعته من قاعدة البيانات 
فى هذا الصف وكذلك سوف يتم طباعة الخيارات الخاصة بالاستفتاء من 
قاعدة البيانات وذلك عن طريق كود ۸8S۶‏ فى مرحلة لاحقة من هذا الفصل. 

بعد الانتهاء من الخطوة السابقة قم بتحديد الصف الأول واختر لونا 
مناسبا له وكذلك باقى الصفوف ماعدا الصف الأخير إتركه بدون لون تظليل 
ليظهر الجدول كما بالشكل التالى : 


بعد قيامك بتعديل شكل الجدول وألوان التظليل قم بالاتجاه إلى 
خصائص الزر الأول تم بتسميته امم _ نا وإعطائه القيمة ١‏ 
وكذلك قم بتسمية باقى الأزرار بنفس الاسم ولكن قم بتغيير القيمة الخاصة 


10۹ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
زو کت و ا هد لن او ااا ع د 
کک کک کا کو اا کے و ا اکان ا 

على النحو التالى : 
وسوف يتم لاحقا معرفة معنى الكود الدی تم کتابته فی ہ0نAct‏ 
الخاص بالصفحة وإليك الكود الخاص بالجدول والأزرار على النحو التالى : 


<form method=" POST" action="<%o= request.servervariables(""script_ name") 
%><""> 
<div align="center''"> 
<center> 
<table border="1" cellpadding="0" cellspacing="0" style="border-collapse: 
collapse" bordercolor="#FFFFFF" width="507" id=" AutoNumber8" 
height="218'"'> 
<tr> 
<td bgcolor="#777777" height="23'">&nbsp;</td> 
<tr> <tr> 
<td bgcolor="#DFECES8" height='"23'""> 
<input type="radio" value="1" name="u_ input'"></td> 
<tr> <tr> 
<td bgcolor="#DFECES8" height="23'""> 
<input type="radio" name="u_input" value="2'"'></td> 
<tr> <tr> 
<td bgcolor="#DFECES8" height="24'""> 
<input type="radio" name="u_input" value="3'"'></td> 
<tr> <tr> 
<td bgcolor="#DFECES8" height="24'""> 
<input type="radio" name="u_input" value='"4'"'></td> 
<tr> <tr> 
<td height="101'""> 
<p align="center'""><input type="submit" value=" mيgص3'"><br>‎ 
<br> <br> <br> 
&nbsp;</td> 
</tr> <Itable> </center> </div> </form> 
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و ام الف کی 
بعد إنشاء الجدول السابق نكون قد انتهينا من تصميم الجدول الذى 

سيتم طباعة سؤال وخيارت الاستفتاء بداخله ولكن يتبقى لنا الجدول الذى 
سيتم عرض نتائج التصويت بداخله » ولعمل ذلك قم بالانتقال إلى السطر 
التالى لزر (تصويت) ثم قم بإدراج جدول مكون من ثلاثة أعمدة وسبعة 
قرفا فرطل م اة ن لجرل کا ا انى 


وإليك الكود الخاص بالجدول المدرج وذلك علی النحو التالى : 


<center> 
<table border="1" cellpadding="0" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="548" id=" Auto0Number7" 
height='"162"'> 
<tr> 
<td width="184" bgcolor="#C0C0C0" height='""23'"'> 
&nbsp;</td> 
<td width="188" bgcolor="#C0C0C0" height="23" align="center'"> 
&nbsp;</td> 
<td width="174" bgcolor="#CO0C0C0" height="23" align="center'""> 
&nbsp;</td> 
</tr> <tr> 
<td width="184" bgcolor="#C0C0C0" height='""23'"'> 
&nbsp;</td> 
<td width="188" bgcolor="#CO0C0C0" height="23" 
align="center">&nbsp;</td> 
<td width="174" bgcolor="#CO0CO0C0" height="23" 
align="center">&nbsp;</td> 
</tr> <tr> 
<td width="184" bgcolor="#C0C0C0" height='""23'"'> 
&nbsp;</td> 


۱71 


اة الاکن 


<td width="188" bgcolor="#CO0CO0C0" height="23" 
align="center">&nbsp;</td> 
<td width="174" bgcolor="#CO0CO0C0" height="23" 
align="center">&nbsp;</td> 
<tr> <tr> 
<td width="184" bgcolor="#C0C0C0" height='"23'"'> 
&nbsp;</td> 
<td width="188" bgcolor="#CO0CO0C0" height="23" 
align="center">&nbsp;</td> 
<td width='"174" bgcolor="#CO0CO0C0" height="23" 
align="center">&nbsp;</td> 
<ltr> <tr> 
<td width="546" colspan="3" align="center" height="24" 
bgcolor="#C0C0C0"'> 
&nbsp;</td> 
</tr> <tr> 
<td width="184" height="23" bgcolor="#C0C0C0">&nbsp;</td> 
<td width="188" height="23" bgcolor="#C0C0C0">&nbsp;</td> 
<td width="174" height="23" bgcolor="#C0C0C0">&nbsp;</td> 
<tr> <tr> 
<td width="184" height="24" bgcolor="#C0C0C0">&nbsp;</td> 
<td width="188" height="24" bgcolor="#CO0C0C0"'> 
&nbsp;</td> 
<td width="174" height="24" bgcolor="#C0C0C0">&nbsp;</td> 
</tr> </table> </center> 


ولقد قمنا يإدراج هذا العدد من الصفوف والأعمدة وتم تنسيقهم بالشكل 
السابق وذلك حتى يتم وضع نتائج التصويت بداخلهم على النحو التالى : 


الخيار الأول صورة توضح النسبة نسبة الخيار الأول 

الخيار الثانى صورة توضح النسبة نسبة الخيار الثانى 

الخيار الثالث صورة توضح النسبة نسبة الخيار الثالث 

الخيار الرابع صورة توضح النسبة نسبة الخيار الرابع 
عفواً .. لقد قمت بالتصويت مسبقاً أو تمت عملية التصويت بنجاح 

إجمالى الأصوات: الرقم الخاص بالإجمالى 

الآى بى الخاص بك هو: الرقم الخاص بالا بى 
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بناء المواقع الإلكترونية ذات الطابع الديناميكى 

والشكل السابق عبارة عن توضيح لما سيتم إظهاره داخل الجدول 
الذى قمنا بادراجه مؤّخراً حيث سیتم اظهار هذه النتائج عندما يقوم المستخدم 
باختيار أحد الخيارات ثم النقر على زر (تصويت) . 

والآن سوف نقوم بالبدء فى كتابة كود ۸6۲ وذلك على المراحل 
التالية : 
المرحلت الأولى : 

فى بداية هذه المرحلة سوف نقوم بإنشاء صفحة جديدة عن طريق 
قائمة ]۴1 ثم اختيار الأمر New‏ وسوف نقوم بحذف جميیع الأكواد 
الموجودة بالصفحة وسوف يتم كتابة كود جديد للإتصال بقاعدة البيانات 
وذلك على النحو التالى : 

<% 


set conn=server.createobject('"'ADODB.Connection") 
conn.provider=" Microsoft.Jet.OLEDB.4.0" 


conn.open(server.MapPath("elmenzlawy_25.mdb'"")) 
< 


وبعد قيامك بكتابة الكود السابق قم بحفظ الصفحة باسم مكج. 01۸1ء 
والكود السابق هو كود اتصال بطريقة أخرى سوف نستخدمه فى هذه 
المرحلة وفى مراحل أخرى متقدمة وهذا الكود هو كود اتصال عن طريق 
0 وفی هذا الکود قمنا بالإعلام عن أننا سوف نستخدم طريقة ۸50 
وذلك فى السطر الأول من الكود وفى السطر الثانى يمكننا ملاحظة استخدام 
متغير ( ١ط‏ ) وذلك لكى يتم إستدعائه عند طلب إحدى العمليات كالبحث 
أو التعديل أو الإضافة وسوف تلاحظ أننا نقوم بكتابة ue‏ م×م.۸۸٠ء‏ قبل 
البدء فى تنفيذ أى عملية وقد قمنا أيضا بالإعلام أننا سنستخدم قواعد البيانات 
من نوع ءء٥٥۸‏ وفى السطر الثالث قمنا بتحديد مسار قاعدة البيانات . 

وبعد قيامك بحفظ الصفحة السابقة قم بإغلاقها ثم انتقل إلى صفحة 
9۳ وقم بالبدء فى كتابة الكود التالى : 


1۳ 


EG‏ انافك 


<% 
u_inputerequest.form("u_input"") 
u_ip=request.servervariables("'remote_addr") 
if u_input = """' then 


< 

<!--#include file="conn.asp'"--> 
<% 

selectSQL="select * from poll" 

set rs=conn.execute(selectSQ L)Yo> 


فى هذه المرحلة من الكود قمنا بإخباره بأن لدينا متغيرين حيث أن 
u_ input‏ هو المتغير الأول و م1 ن هو المتغير التانى والمتغير الأول 
عبارة عن مدخلات المستخدم أى يمثل مد خلات المستخدم من الخيارات 
الخاصة بالاستطلاع والمتغير الثانى عبارة عن ال ۲[ الخاص بالمستخدم 
حيث تم استخدام sع[طservervar12. request‏ وهذەه الجملة يتم كتابتها 
عندما نرغب فى أخذ معلومات عن المستخدم وفى مثالنا هذا قمنا بكتابة 
(”ote_d1صemا")‏ لكى يتم تسجيل ال ۲[ الخاص بالمستخدم وسيكون 
م1 _ں هو ال 1۴ الخاص بالمستخدم و بعد ذلك قمنا بكتابة جملة تقول أنه 
" عندما یکون {)ںمہ_ں فارغ أی أن المستخدم لم یقوم باختیار أی اختيار 
من الخيارات المتاحة 16 ( سيتم عمل الآتى ) " والآتى هو أنه سوف 
يتم استدعاء كود الإتصال الذى قمنا بكتابته فى الصفحة .45p‏ ٥٥ء‏ ثم سيتم 
استخدام جملة 1ءء [عء لتحديد سؤال وخيارات الاستفتاء من الجدول [ام٥‏ 
وبعد ذلك قمنا بإعطاء الأمر بالتنفيذ ويمكنك ملاحظة أننالم نحدد شرط 
للتحديد أى أنه سيتم تحديد الحقول التى سوف نقوم بإخباره بها بالمرحلة 
الثانية من الكود ولعلك فهمت أيضا أننا نقصد بكتابة جملة S1‏ 
أننا نرغب فى عرض سؤال التصويت وكذلك خيارات التصويت من الجدول 
11 عندما لايقوم المستخدم بإدخال أى خيارات . 
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بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 
المرحلة الثاني : 
فى هذه المرحلة من الكود سوف نقوم بكتابة أسماء الحقول الخاصة 
بسؤال وخيارات التصويت وذلك داخل خلايا الجدول الأول على النحو 
التالى : 


<center> 
<table border="1" cellpadding="0" cellspacing="0" style="border- 
collapse: collapse; border-width: 2; " bordercolor="#FFFFFF" width="535" 
id=" AutoNumber6''"> 
<tr> 
<td style="border-left:2px none #FFFFFF; border-right:2px none 
#FFFFFF; border-top-style:none; border-top-width:medium" width="534" 
bgcolor="#777777'">&nbsp;<font color="#FFFF00'"><font 
size="4'"'><þ><%=rs("qu")%o> </b></td> 
<tr> <tr> 
<td style="border-style: solid; border-width: 1; " width="534" 
bgcolor="#DFECE8'"> 
<input type="radio" value="1" name="u_input'"> 
<font size="4" color="#000080'"'><%o=rs("'select1'"')% ></td> 
<tr> <tr> 
<td style="border-style: solid; border-width: 1; " width="534" 
bgcolor="#DFECE8'"> 
<input type="radio" name="u_input" value='"2'"><font 
color="#000080'"> <font size='"4'"><%=rs("select2")% ></td> 
<tr> <tr> 
<td style="border-style: solid; border-width: 1; " width="534" 
bgcolor="#DFECE8'"> 
<input type="radio" name="u_input" value='"3'""><font 
color="#000080'"> <font size="4'"><%=rs("select3'")% ></td> 
<tr> <tr> 
<td style="border-style: solid; border-width: 1; " width="534" 
bgcolor="#DFECE8'"'> 
<input type="radio" name="u_input" value='"4'"><font 
color="#000080'"> <font size='"4'"><%=rs("select4")% ></td> 
<tr> <tr> 


1۵ 


اة التضافك 


<td style="border-left:2px none #FFFFFF; border-right:2px none 
#FFFFFF; border-bottom-style:none; border-bottom-width:medium" 
width='"534'"'> 

<p align="center'""> 


<input type="submit" value=" تصويیت‎ " ></td> 


</tr> </table> </center> 
<% 

conn.Close 

Set conn=Nothin g 

< 


الكود السابق هو الكود الخاص بالجدول الأول متضمنا أسماء 
الحقول الخاصة بسؤال وخيارات التصويت ويلى كود الجدول الكود الخاص 
بإنهاء عمل مره وإنهاء الاتصال . 
المرحلم الثالثى : 


فی هذه المرحلة من الكود سوف نخبره بأنه عندما لا يتحقق ماسبق أى 
عندما يقوم المستخدم باختيار أحد الخيارات فسوف يتم التأكد من أن ال 1۲ 
الخاص به غير مسجل فى قاعدة البيانات وسوف نستخدم كود اتصال آخر 
فی هذه المرحلة وأيضا جملة †ءم][م؟ لكى يتم التأكد من عدم وجود 1۲ 
وإليك الكود على النحو التالى : 

<% 

else 

accessdb=" elmenzlawy_25 " 

cn="driver={Microsoft Access Driver (*.mdb)};" 


cn=en & "dbq=" & server.mappath(accessdb) 
set rs = server.createobject('"'ADODB.Recordset") 


sql = "select ip from vote where ip ='" & u_ip & """ 


rs.Open sql, cn 

if rs.eof then 
been_here_before="No" 
end if 

rs.close 
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بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 

من خلال الكود السابق يمكنك ملاحظة أننا قمنا باستخدام كود اتصال 

آخر لكى يتم عمل اتصال بقاعدة البيانات وتحديد ال ۴[ الخاص بالمستخدم 
الذى قام بعملية الاختيار وذلك موضح بسطورالكود كالاآتى : 


<% 

else 

accessdb=" elmenzlawy_25 " 
cn="driver={Microsoft Access Driver (*.mdb)};" 


cn=en & "dbq=" & server.mappath(accessdb) 

set rs = server.createobject('"'ADODB.Recordset") 
sql = "select ip from vote where ip ='" & u_ip & """ 
rs.Open sql, cn 


بعد ذلك قمنا بإخباره أنه عندما يصل إلى آخر الملف ولم يجد 1۲ 
مطابق ل ۲[ الجهاز الخاص بالمستخدم القائم بعملية التصويت أى أن هذا 
المستخدم لم يسبق له التصويت فسوف يتم الأخذ فى الإعتبار أنه لم يقم 
بالتصويت مسبقاً وسوف يتم إنهاء عمل وع وتنفيذ مايليه من أكواد 
وذلك موضح بسطورالكود على النحو التالى : 


if rs.eof then 
been_here_before="No" 


end if 
rs.close 


المرحلة الرايبعت : 

فى هذه المرحلة من الكود سوف نقوم بإخباره بأنه إذا تأكد من عدم 
وجود 1۲ للمستخدم القائم بعملية الاختيار فى الجدول م۷0 أى أن 
المستخدم صاحب 1 لم يقم بالتصويت سيتم إدراج ال 1۴ الخاص به والقيمة 
(1( داخل الحقل الخاص بالاختيار الذدى قام باختیاره . فعلی سبيل المثال 
لو قام المستخدم باختيار الخيار الأول فسوف يتم إدراج ال 1۲ الخاص به فى 
عمود 1۲ وكذلك القيمة (1) فى حقل ( ۸1١٥1)ءع1عء)‏ وإليك الكود الخاص 
بذلك على النحو التالى : 


1۷ 


الافک 


if been_here_before = "No" then 
sql = "insert into vote (ip, selection" & u_input &'") " 


sql = sql & "values (" & u_ip & "",1)" 
rs.Open sql, cn 
end if 


وفى الكود السابق يمكنك ملاحظة أن السطر الأول يقول "لو 
المستخدم لم يقم بالتصويت مسبقاً " : 
ولعلك سألت نفسك عزيزى القارىء ما الذى دفعنا إلى القيام بإدراج 
القيمة (1( بداخل ١‏ لحقل الذى تم اختياره مع أننا قد سبق وقمنا بكتابة قيم 
مختلفة لكل زر من أزرار الاختيار أثناء عملية التصميم ؟. وحقيقة ذلك أننا 
قمنا بکتابة ھذہ القیم لکی يتم التفرقة بین الأزرار فقط ولم یتم کتابتھا لکی يتم 
إدراج هذه القيم بداخل الحقول فإجعلنى أذكرك بأن جميع الأزرار باسم واحد 
وإذا قمنا بكتابة القيمة (1) لكل الأزرار ففى هذه الحالة أصبحت جميع 
الخيارات واحدة أى لا يتم التفرقة بين كل خيار من الخيارات الموجودة , 
المرحلت الخامست : 
فى المراحل السابقة قمنا باستدعاء السؤال الخاص بالاستطلاع وكذلك 
الخيارات الخاصة به وكذلك قمنا بإدراج المدخلات داخل قاعدة البيانات 
والآن نريد حساب عدد الأصوات داخل كل حقل أى حساب عدد الأصوات 
لكل خيار من الخيارات المتاحة لدينا وكذلك حساب إجمالى الأصوات أى 
حساب عدد الصفوف الموجودة لدينا ولعمل ذلك إليك الكود التالى : 
sql= "select distinctrow sum(selection1) as sum_selection1, "‏ 
sql= sql & "sum(selection2) AS sum selection2, sum(selection3) AS‏ 
sum_selection3, "‏ 
sql= sql & "sum(selection4) AS sum_selection4, count(*) AS total votes "‏ 


sql= sql & "FROM vote;" 
rs.Open sql, cn 


total1=rs ("sum_selection1") 
total2=rs ("sum_selection2") 
total3=rs ("sum_selection3") 
total4=rs ("sum_selection4") 
count=rs ("total_votes") 

>< 


۱۸ 


اء لفو افع الك وة دات الطان الديتافيكى 


فن اکر ان فا عة رامو الح حت فا اغطات ها مر 
بجمع كل حقل وذلك عن طريق كتابة جمل S|‏ ومصں؟ وقد قمنا أيضا 
بحساب إجمالى الأصوات عن طريق ٤«ںه٥‏ وقد قمنا بإخباره أن الحقول 
التى سيتم تجميعها ستكون من الجدول م۷0 وكذلك قمنا بإخباره أن 
1 عبارة عن مجموع 11٥1اءم]1مS‏ (الخيار الأول) وكذلك فى باقى 
الحقول ثم قمنا بإخباره أن "٤‏ ه٥‏ عباره عن مجموع إجمالى الأصوات . 
اقا 


ان کا اکا افوا اا کون ف اه ن رات 
و ا کا ا و 
والآن نحن بصدد كتابة أكواد جدول عرض مجموع القيم وأيضا نسب 
التصويت وفى هذه المرحلة سوف نقوم بإعادة استدعاء خيارات التصويت 
فن فاع الاعات رقن كود قصل ادى ا مف اه اة 
وهو الكود الموجود بالصفحة مءه. ٥٥".‏ وذلك على النحو التالى : 


<!--#include file="conn.asp'"--> 
<% 


selectSQL="select * from poll" 
set rs=conn.execute(selectSQ L)Yo> 


بعد ذلك سوف نقوم بكتابة أسماء الحقول الخاصة بخيارات التصويت 
وذلك فى الجدول الخاص بنتائج التصويت ولعمل ذلك بأسهل الطرق قم 
بالاتجاه إلى وضع التصميم اه N٥۲‏ » ثم قم بوضع المؤشر داخل الخلية 
التى ترغب فى إظهار محتويات الحقل بها ثم انتقل إلى الوضع H۲11‏ 
لتجد المؤشر بداخل كود الخلية التى قمت باختيارها ثم قم بلصق اسم الحقل 
على النحو التالى : 

والاسم السابق هو اسم الحقل الأول والخاص بإظهار محتويات الحقل 
ويمكنك اتباع نفس الطريقة لإدراج محتويات باقى الحقول فى الجدول 
الخاص بالنتائج . 


4۹ 


AANA AEN 
lela SE SEN GE ass 
الأربعة الأولى فى العمود الأول فبعد ذلك قم بالانتقال إلى العمود الثانى‎ 
والذى سيتم إدراج التمثيل البيانى للقيم بداخله ولكى تتمكن من عمل تمثيل‎ 
بيانى ستجد أنك بحاجة إلى صورة لكى يتم إجراء التمثيل البیانى بها حيث‎ 
: تحتاج إلى هذه الصورة لكى يظهر التمتيل البيانى للقيم كما بالشكل التالى‎ 
ڪڪ ڪڪ‎ 
فشكل الاق هى الشكل الذي سيك استخذامة فى التمقل الببانى للقي‎ 
الناتجة عن عملية جمع الأصوات ولقد قمت بتسمية هذه الصورة بالاسم‎ 
.]ام و قمت بوضعها فى المجلد ومعهص] وسوف نقوم الآن بعمل‎ gif 
تمثيل بيانى للقيم الخاصة بالحقل 1١٥10اءع]آم؟ ولعمل ذلك قم بوضع‎ 
المؤشر داخل الخلية الأولى فى العمود الثانى › ثم قم بالانتقال إلى الوضع‎ 
: اګ » ثم قم بكتابة الكود التالى‎ 


</span><img src="images/poll.gif" height="10" 


width="<%= (total1/count)*100 %>""> 

فى الكود السابق يمكنك ملاحظة أننا قد قمنا بعمل رابط للصورة 
الموجودة داخل المجلد ومعهص] وهى ع.11ه۴ بعد ذلك قمنا بتحديد 
ارتفاعها وهو (10) ولكن بالنسبة لعرض الصورة قمنا بإخباره بأن هذا 
الععرض سيكون عبارة عن مجموع الحقل )tota11( Selecti0o¬1‏ + 
إجمالى الأصوات (٤رسںهء)‏ × ٠٠١‏ وقد قمنا بالضرب فى العدد ٠٠١‏ لكى 
يتم إستخراج الأرقام فى صورة نسب مئوية ويمكنك استكمال باقى الحقول 
على نفس النهج ولكن مع تغيير مجموع الحقل من (11ه)ه)) إلى مجموع 
الحقل الموضح بالكود . فعلى سبيل المثال أثناء التمثيل البيانى لقيم الحقل 

الثانى سيتم كتابة (a12٤ه0))‏ وهكذا بنفس الطريقة مع باقى الحقول . 
فبعد قيامك بعمل الخطوة السابقة قم بالانتقال إلى الخلية الأولى فى 
العمود الثالث ويمكنك ملاحظة أننا قد قمنا بتخصيص هذا العمود لإظهار 


أ آلف اف الك وة ذذ لكان الد فك 
اف غ کل اشا ف كل ر ف قك ع خف الم اا 
حيث فى العمود الثانى قمنا بتمثيل الأرقام فى شكل بيانى وسوقف نقوم الآن 
بإظهار النسب الرقمية الخاصة بالاختيار الأول ولعمل ذلك قم بوضع 
المؤشر فى الخلية الأولى من العمود الثالث ثم قم بالاتجاه إلى 
الوضع۷1 11 تم قم بكتابة الكود التالى : 

والكود السابق هو نفس فكرة الكود الخاص بالتمثيل البيانى ولكن مع 
اختلاف كلمة (e۲ادصںہاهصإه])‏ وهی خاصة بإظهار المحتویات فی شكل 
أرقام ويمكنك ملاحظة أيضا أنه تم وضع علامة عشرية بعد الرقم ( 100 ) 
وبعدها تم كتابة الرقم ( 1 ) ونقصد بذلك أن الحد الأقصى للأرقام التى توجد 
بعد العلامة العشرية هى رقم واحد فقط ويمكنك تغييرها إلى أكثر من ذلك . 

فبعد قيامك بالخطوة السابقة قم باستكمال باقى الحقول على نفس النهج 
ولكن مع تغيير مجموع الحقل من (11ه٥))‏ إلى مجموع الحقل الموضح 
بالكود . 

وبعد إظهار الخيارات والتمثيل البيانى والنسب المئوية لكل منها فإننا 
بحاجة لكتابة كود لكى يتم إظهار عبارة عند نجاح التصويت وعبارة أخرى 
عند قيام مستخدم بالتصويت للمرة الثانية ولعمل ذلك قم بوضع المؤشر داخل 
الضف الان د ترك ود:٠‏ 


<% if been_here_ before <> "No" then %> 
<font color='""#FF0000''>>bظ><اةبسم ا0 /><(/>عفوا.. لقد قمت بالتصویت‎ 


<% else %> <b><font co1l0r="#000080'"'<حاجنب تمت عملي التصويت‎ 
<% end if %o> </font></b> 


وفى الكود السابق نقصد بكتابة السطر الأول أن " لو المستخدم 
قام بالتصويت مسبقا " سيتم إظهار عبارة " عفواً .. لقد قمت بالتصويت 
مسبقاً " أما إذا لم يتحقق هذا الشرط فسوف تظهر عبارة " تمت عملية 
التصويت بنجاح" . 
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بناء المواقع الإلكترونية ذات الطابع الديناميكى 
بعد قيامك بالخطوة السابقة قم بوضع المؤشر داخل الخلية رقم ٦‏ 
فى العمود الثانى وذلك حتى يتم كتابة كود لإظهار إجمالى الأصوات 
على النحو التالى : 
ويلاحظ فى الكود السابق كتابة الرقم ( 0 ) بعد العلامة العشرية 
وذلك لأن إجمالى الأصوات يعنى عدد الأشخاص الذين قاموا بالتصويت 
ومنطقيا لايمكن وجود كسور فى عدد الأشخاص الذين قاموا بالتصويت . 
بعد قيامك بالخطوة السابقة قم بوضع المؤشر داخل الخلية رقم ۷ فى 
الصف الثانى وذلك حتى يتم كتابة كود لإظهار 1۲ المستخدم على النحو التالى : 
وأخيراً يتبقى لنا إنهاء آخر اتصال تم بقاعدة البيانات وإنهاء جملة 1۴ 
وذلك عن طريق كتابة الكود التالى : 


<% 
conn.Close 


Set conn=Nothing 
%> <% end if %> 


ويمكنك التعديل فى المظهر الخاص بجدول النتائج فلقد قمت بتغيير 
لون التعبئة الخاص بآخر ثلاثة صفوف إلى اللون الأبيض وإليك أكواد 
8P‏ التى تم كتابتها بدءاً من المرحلة الثالتة وكذلك الكود الخاص بجدول 
نتائج الاستطلاع متضمنا أكود ۸8۲ على النحو التالى : 


<% else 

accessdb=" elmenzlawy_25 " 
cn="driver={Microsoft Access Driver (*.mdb)};" 
cn=en & "dbq=" & server.mappath(accessdb) 


set rs = server.createobject('ADODB.Recordset"") 
sql = "select ip from vote where ip ='" & u_ip & """ 
rs.Open sql, cn 


if rs.eof then 


۱۷۲ 


با الفة افع ال الك وة دان الات الدينافيكى 


end if 
rs.close 
if been_here_before = "No" then 


sql = "insert into vote (ip, selection" & u_input &'"") " 

sql = sql & "values ("" & u_ip & "",1)" 

rs.Open sql, cn 

end if 

sql= "select distinctrow sum(selection1) as sum_selectionl, '" 

sql= sql & "sum(selection2) AS sum_selection2, sum(selection3) AS 


sum_selection3, " 
sql= sql & "sum(selection4) AS sum_selection4, count(*) AS total votes " 
sql= sql & "FROM vote;" 
rs.Open sql, cn 
total1=rs ("sum_selection1'"") 
total2=rs ("sum_selection2") 
total3=rs ("sum_selection3'"") 
total4=rs ("sum_selection4") 
count=rs (""total_votes'"") 


> 
الكود الخاص بجدول نتائج الاستطلاع : 


<!--#include file="conn.asp'"--> 
<% 
select(SQL="select * from poll" 
set rs=conn.execute(selectSQL)%> </p> 
<div align="center'"> 
<center> 
<table border="1"" cellpadding="0" cellspacing='"0" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="548" id=" AutoNumber7" 
height='""162''> 
<tr> 
<td width="183" bgcolor="#E4E4E4" height="23'"><font 
color="#000080'"'> <font size="3'"><%=rs('select1'")%o></td> 
<td width="189'" bgcolor="#E4E4E4" height='"23'""> </span><img 
src="images/poll.gif" height="10" width='"<%= (total1/count)*100 %>'"> 
</td> 
<td width="174" bgcolor="#E4E4E4" height="23" align="center'"> 
<%= formatnumber((total1/count)*100,1) Y%o>Yo<br> 


۱۳ 


انافك 


</td> </tr> <tr> 
<td width="183" bgcolor="#E4E4E4" height="23"'><font 
color="#000080'"'> <font size='"3'"><%o=rs('select2'")%o></td> 
<td width="189'" bgcolor="#E4E4E4" height='"23"></span><img 
src="images/poll.gif" height="10'" width="<%-= (total2/count)*100 %>'"> 
</td> 
<td width="174" bgcolor="#E4E4E4" height="23" 
align="center'"><%= formatnumber((total2/count)*100,1) %>%<br> 
</td> </tr> <tr> 
<td width="183" bgcolor="#E4E4E4" height="23'"><font 
color="#000080'"'> <font size="3'"><%o=rs('select3'")%></td> 
<td width="189" bgcolor="#E4E4E4" height='"23"></span><img 
src="images/poll.gif" height="10" width='"<%= (total3/count)*100 %>'""></td> 
<td width="174" bgcolor="#E4E4E4" height="23" 
align="center'"><%= formatnumber((total3/count)*100,1) %O>%o</td> 
</tr> <tr> 
<td width="183" bgcolor="#E4E4E4" height="23'"><font 
color="#000080'"'> <font size="3'"><%o=rs('select4'")Yo> 
</td> 
<td width="189'" bgcolor="#E4E4E4" height='"23"></span><img 
src="images/poll.gif" height="10" width='"<%= (total4/count)*100 %>'""></td> 
<td width="174" bgcolor="#E4E4E4" height="23" 
align="center'"><%= formatnumber((total4/count)*100,1) %O>%o</td> 
</tr> <tr> 
<td width="546" colspan="3" align="center" height='"24'"><% if 
been_here_before <> "No" then %> 
<font color='""#FF0000'"'>>bڻ=><اةبسم /><ط/>عفوا.. لقد قمت بالتصویت‎ n< 
<% else %> <b><font col0r="#000080'"'<حاجنب تمت عملي التصويت‎ 
<% end if %o> </font><</b> 
<ltd> </tr> <tr> 
<td width="183" height="23'"><b><font size='"2" 
color="#000080'">&nbsp; 
إجمالی الأصوات‎ :>/f٥«<>/ط<>/)4<‎ 
<td width="189" height="23'"><%= formatnumber(count,0,0) 
%></td> 
<td width="174" height="23'">&nbsp;</td> 
<tr> <tr> 
<td width="183" height="24'"><b><font color="#000080" size='""2''> 
& الآی بی الخاص بك هو :ما1‎ :>/f0n<>/ط<>/‎ d< 


1٤ 


بنا الفواقع الك وة دات الظاع الديناميكن 


<td width="189" height="24"><%= u_ip %><% 


conn.Close 
Set conn=Nothing 
%> <% end if %o> 
</td> <td width="174" height="24">&nbsp;</td> 
</tr> </table> </center> 
: وكذلك الخيارات من داخل قاعدة البيانات كما بالشكل التالى‎ 


0 ممتاز 


اھا ر کا 
0 جید 


@ غير لائق بمستوى مصر بعد التورة 


قير قات الاسنطاد ع كما بال التائ : 


Yr ا[‎ Ee 

ا ا ا Yn‏ 

Yn x أ‎ E 

فير لاق پستوی نر بد ار :و o) sepe‏ 
تمت عملية التصويت بنجاح 

إجمالي الأصوات : 1 

الآى يى الخاص يك سو : e‏ 


فالشكل التاق هو التكل الذن سيظهر عد فاك اشا أحة 
الخيارات المتاحة ثم الضغط على زر ( تصويت ) حيث سيتم عرض نتائج 


1۷۵ 


ف اغراف الك هة ذا الطاة الاين 


کی فت اوک و ر کا ا 


ممتاز أ + 
e |‏ ا Bh‏ 
جيذ ا »|« O‏ 
غير لان پستو ی مصر ب ال :و =« o‏ 


إجمالى الأصوات : 1 


الآى بي الخاص بك هو : E‏ 
ثالثا : إنشاء صفحة حذف نتائج التصويت : 


کے کا ارک سرک کی ل کات کی فن ای ین 
حف السات الخاسة بات اضر بت رفك تنا افير الشوال الخاضن 
بالتصويت وعمل تصويت اخر من جديد ولعمل ذلك سوق نقوم بإنشاء 
صفحتين الصفحة الأولى خاصة بعرض سجلات التصويت من قاعدة 
البيانات وسوف نقوم بتسميتها مءه.اءل_ع)٥۷‏ والصفحة الثانية خاصة 
باستقبال أوامر الحذف من الصفحة الأولى وسوف نقوم بتسميتها موه.1مل 
وسوف نبدأً بإنشاء الصفحة الأولى ويمكنك إنشاء هذه الصفحة عن طريق 
حفظ أحد الصفحات التى لايوجد بها قوائم جانبية بالاسم pئه.‏ 1ل V0‏ . 
وبعد الحفظ قم بإنشاء جدول كما بالشكل التالى : 


حذف 


وإليك الكود الخاص بإنشاء الجدول على النحو التالى : 


<center> 
<table border="1"" cellpadding="0'"" cellspacing='"0" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="710" id=" AutoNumber8" 


height="46'"> 
<tr> 
<td width="98" bgcolor="#2480DB'" height="27'"'> 
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با الفة افع ال الك وة دات الطاب الدينافيكى 


<p align="center'"><b><span lang="ar-eg">&nbsp;<font 
color="#FFFFFF">ى١Î|‎ 

</font></span></b></td>‏ بى 

<td bgcolor="#2480DB" width="98'" align="center" height="27" 
valign="middle'"> <b> 

<font color="#FFFFFF'">&nbsp;Jأl‎ رlë†ll</font></b></td>‎ 

<td bgcolor="#2480DB" width="98'" align="center" height="27" 
valign="middle'"> <b> 

<font color="#FFFFFF">&nbsp;”أilûl|‎ راخلl</font><‎ </b> </td> 

<td bgcolor="#2480DB" width="98'" align="center" height="27" 
valign="middle'"> <b> 

<font color="#FFFFFF'">&nbsp; lll رايخلا>/font<>/b<>/td<‎ 

<td bgcolor="#2480DB" width="99'"" align="center" height="27" 
valign="middle'"> <b> 

<font color="#FFFFFF"> &nbsp; lll رlخلl</font<</b></td>‎ 

<td bgcolor="#2480DB" width="175" align="center" height="27" 
valign="middle'""> 

<span lang="ar-eg"><font color="#FFFFFF'"'><b> رخ‎ 
تیوصتلا>/(<>/]0nt<>/span<>/td<‎ 

<td width="115" bgcolor="#2480DB" height='"27'"'> 

<p align="center'"><b><font color="#FFFFFF">&nbsp;<span 
lang="ar-eg">فikح‎ 

تیوصتلا>/spمan<>/font<>/b<>>/td>‎ <tr> <tr> 

<td width="98'" height="19'" bgcolor="#A3C4E6'"'> <font 
color="#000066'"><center></td> 

<td width="98" height="19'" bgcolor="#A3C4E6'"'> <font 
color="#000066'"><center></td> 

<td width="98" height="19'" bgcolor="#A3C4E6'"'> <font 
color="#000066'"><center></td> 

<td width="98" height="19'" bgcolor="#A3C4E6'"'> <font 
color="#000066'"><center></td> 

<td width="99" height="19'" bgcolor="#A3C4E6'"'> <font 
color="#000066'"><center></td> 

<td width="150" height="19" bgcolor="#A3C4E6'"> <font 
color="#000066'"'><center></td> 

<td width="115'" height="19" bgcolor="#DFECE8"'> 

<p align="center'""><b> 

<font color="#000080'"'><a href="del.asp?id=<%=rs('id'")%>'"> 


1۷ 


بناء المواقع الإالكترونية ذات الطابع الديناميكى 
<font color="#000080'"'>dAia</font></a></font></b></td>‏ 
</tr> </table> </center>‏ 
الكوة السانى هو الكو الكاضن ناء الخد ل و مسك حط ة انا فة 
قمنا بربط كلمة ( حذف ) بالرابط ( del.asp?id=<%=1s("14"0%<‏ ( 
حيث هذا الرابط هو الرابط الخاص بالصفحة مءه.1ءل والتى سيتم من 
خلالها استقبال أوامر الحذف . 


وبعد الانتهاء من كتابة الكود السابق فسوف نبداً بکتابة كود ctم]عS‏ 
نستخدم الكود الموجود بالصفحة conn.asp‏ للاتصال بقاعدة البيانات 
وذلك على النحو التالى : 

<!--#include file="conn.asp'"" --> 
<% 
select(SQL="select * from vote " 


set rs=conn.execute(selectSQ L)%o> 
<% 


if RS.EOF then 
response.write "<center><font c0l0r=red> ع¶gklب‎ iلlج—سم لايو جد نتائج‎ 
</font></center>" 
else 
< 


ELSE E EAN ESED ESS 
وعبارة‎ 0)٥ وقمنا بكتابة جملة )م ]مء لكى يتم تحديد محتويات الجدول‎ 
أخرى لكى يتم ظهورها عندما لايوجد نتائج مسجلة بالموقع.‎ 

بعد القيام بعمل اتصال بقاعدة البيانات وكتابة جملة {عم[ع؟ فإننا 
بحاجة إلى تحديد الحقول الموجودة بالجدول وسوف يتم ذلك بنفس الطريقة 
القن ف ات اعا كى ال لال اة ىو ف ع اا نة ون فرحا 
الكود والتى تم شرحها مسبقا وإليك الكود الخاص بالجدول متضمنا أكواد 
۴ وذلك على النحو التالى : 


1۸ 


ناء الفة افع آل الك وة دات الطاب الدينافيكى 


<div align="center'"> 
<center> 
<table border="1" cellpadding="0" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="710" id=" AutoNumber8" 
height='"46'"'> 
<tr> 
<td width="98" bgcolor="#2480DB'" height='"27'""> 
<P align="center''><bþ><span lang="ar-eg">&nbsp;<font 
color="#FFFFFF">&%| 
yo </font></span></b></td> 
<td bgcolor="#2480DB" width="98" align="center" height="27" 
valign="middle'""> 
<b> 
<font color="#FFFFFF">&nbsp;Jوأل|‎ رluëخ†dl</font></b></td>‎ 
<td bgcolor="#2480DB" width="98" align="center" height="27" 
valign="middle'""> 
<b> 
<font color='"#FFFFFF'">&nbspص;”أill‎ راخلl</font><‎ </b> </td> 
<td bgcolor="#2480DB" width="98" align="center" height="27" 
valign="middle'""> 
<b> 
<font color="#FFFFFF'"'>&nbsp;تÛll|‎ رايخل|>/font<</b<>>/td>‎ 
<td bgcolor="#2480DB" width="99" align="center" height="27" 
valign="middle'""> 
<b> 
<font color="#FFFFFF'">&nbsp;gڊlرlا‎ رlخلl</font><</b></td>‎ 
<td bgcolor="#2480DB" width="175" align="center" height="27" 
valign="middle'""> 
<span lang="ar-eg"><font color="#FFFFFF'"><b> قرخ‎ 
/><ط/>التصویت‎ 0n >/span<>/t d< 
<td width="115" bgcolor="#2480DB'" height="27'""> 
<P align="center'"'><b><font color="#FFFFFF">&nbsp;<span 
lang="ar-eg'">فiذح‎ 
تیوصتلا>/spمan<>/font<>/b<>>/t‎ d> 
</tr> 
<% 
do while not RS.EOF 
%> 
<tr> 
<td width="98" height="19" bgcolor="#A3C4E6"> <font 
color="#000066'"><center><%=rs("ip")%o></td> 
<td width="98" height="19" bgcolor="#A3C4E6"> <font 
color="#000066'"><center><%=rs(""selection1'")% ></td> 
<td width="98" height="19" bgcolor="#A3C4E6'"> <font 
color="#000066'"><center><%=rs("'selection2'")% ></td> 


4 


ا ا و اة التافكن 


<td width="98" height="19" pbgcolor="#A3C4E6'"'> 
color="#000066'"><center><%=rs("'selection3'")% ></td> 
<td width="99" height="19" bgcolor="#A3C4E6'"'> 
color="#000066'"><center><%=rs(""selection4'")% ></td> 
<td width="150" height="19" bgcolor="#A3C4E6'"'> 
color="#000066'"><center><%=rs("entered'")%></td> 
<td width="115" height="19" bgcolor="#DFECES8'"> 
<p align="center''><b> 
<font color="#000080''><a href="del.asp ?id=<%=rs("'id")%o>'"'> 
<font color='"'#000080''>Jj>-</font<</a></font></b></td> 
</tr> 
<% 
RS.movenext 
loop 
< 
</table> 
<% 
set rs=nothing 
conn.Close 
Set conn=Nothing 
end if 
< 


وفى الكود السابق ستجد الأكواد الخاصة بتحديد الحقول مظللة كما 
يمكنك أيضا ملاحظة بداية الحلقة 50 بعد الكود الخاص بالصف الأول وهو 
الصف الخاص بالبيان أى الصف الخاص بتوضيح ماهية البيانات الموجودة 
بباقى الصفوف ولقد تم بداية الحلقة بعد هذا الصف لأننا لا نرغب فى تكرار 
الصف الأول حيث لو أنك قمت بالبدء فى كتابة الحلقة قبل الكود الخاص 
بالصف الأول فسوف يتم تكرار الصف الأول مع كل سجل وذلك أثناء 
عملية عرض البيانات داخل الصفحة ويمكنك أيضا ملاحظة إنهاء الحلقة قبل 
إنهاء الكود الخاص بالجدول أى قبل <ع[طه)/> وذلك حتى يتم عرض 
البيانات فى صفوف متتالية ويمكنك التأكد من ذلك بنفسك . 

بعد كتابة الكود السابق فبذلك نكون قد انتهينا من تصميم الصفحة 
الأولى والخاصة بعرض نتائج التصويت من الجدول م۷0 والآن سوف 
نقوم بإنشاء الصفحة مpوه.1ءل‏ والخاصة باستقبال أمر الحذف الخاص 
بالسجل ولاحظ آننا لن نقوم بإنشاء صفحة لتأكد عملية الحذف كما فعلنا 


1۸۰ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
مسبقا أثناء قيامنا بإنشاء صفحة حذف بيانات الطلاب أى أن عملية الحذف 
سوف تتم مباشرة أثناء الضغط على ( حذف ) ولعمل ذلك قم بإنشاء صفحة 
جديدة عن طريق قائمة ۴٥‏ › ثم اختر wع. ۰٠‏ تم قم بكتابة الكود التالى 
بذاخلها وذلك على النحو التالى : 

<!--#include file="conn.asp'"--> 

<% 

id=request.querystring(""'id") 


deleteSQL = "delete * from vote where id=" &id 
conn.execute(deleteSQL) 


response.redirect "vote_del.asp" 
set rs=conn.Close 

Set conn=Nothin g 

>< 


فى الكود السابق قمنا بإستدعاء مئه.١"ه١‏ والموجود بها كود الاتصال 
بقاعدة البيانات ثم قمنا بكتابة جملة عم[ع بنفس الطريقة التى تم كتابتها 
مسبقا فى الفصول السابقة ثم قمنا بإعطاء أمر بأن يتم الرجوع إلى صفحة 
e.pلJ_ Vote‏ بعد إجراء عملي الحذف تم قمنا بإنھاء ٥n‏ و Rs‏ . 
بعد القيام بإجراء الخطوات السابقة بذلك نكون قد انتهينا من تصميم 
صفحة عرض وحذف نتائج التصويت . 


۱۸1 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
رابعا : إنشاء صفحات تحديث سؤال وخيارات التصوبت : 


بعد قيام المستخدم بحذف نتائج التصويت فمن الطبيعى أنه سوف يقوم 
بتغيير السؤال الخاص بالتصويت وكذلك خيارات التصويت ونحن 
الآن بصدد إنشاء صفحتين صفحة لكى يتم عرض سوال وخيارات 
التصويت الموجودة بداخل قاعدة البيانات وسوف نقوم بتسميتها بالاسم 
e.9۳‏ otا_pا‏ وصفحة أخرى لكى يتم تعديل السؤال الخاص بالتصويت 
وكذلك خيارات التصویت وسوف نقوم بتسمیتھا بالاسم Edit poll.asp‏ 
وسوقف نقوم بإنشاء الصفحة ميه.٥)۷0_منں‏ أولا وهذه الصفحة ماهى 
إلا عبارة عن صفحة لعرض البيانات من الجدول P٥11‏ آی لايوجد اختلاف 
بينها وبين الصفحة الخاصة بعرض البيانات الموجودة بداخل الجدول عأه۷ 
والتى سبق وأن قمنا بإنشائها أى أن الكود لا يختلف عن كود الصفحة 
.ل 0t0‏ إلا فى الكلمات الاسترشادية الموجودة بالصف الأول من 
جدول عرض البيانات و جملة ال †ءع][مS؟‏ حيث سيتم تغيير اسم الجدول 
من ۷٥٥‏ إلى ۴٠11‏ وكذلك اسماء الحقول الموجودة بالجدول وكذلك الرابط 
الخ اص يكلف 1ة لديل والتدى تم تع رة الال ربط 
d‏ ")= %>=1.asp?idاedit_po")%>‏ وبذلك تکون قد انتهیت من 
E CA O‏ 
Vote_ e.‏ وحفظها بالاسم pیه.‏ ع0 ۷_ما وتغييرماسبق ذكره وإليك 
شكل الجدول الخاص بهذه الصفحة وذلك على النحو التالى : 


عل اتد التل: 


۸۲ 


ناء الفة افع الك وة دات الطاب الدينافيكى 


<p align="center'"'><b><font color="#000066'" size="7'"'><br> 
&تعدیل سؤال وخيارات الإستطلاع‎ n >% 
selectSQL="select * from poll " 
set rs=conn.execute(selectSQ L)%o> 
<% 
if RS.EOF then 
response.write ""<center><font c0l0r=r¢ed> عagklب لايو جد استطلاعات‎ 
</font></center>"" 
else 
%></font<</b></td> 
</tr> </table> </center></div> 
<div align="center'"> 
<center> 
<table border="1" cellpadding="0" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="710" id=" Auto0Number8" 
height='"46'"'> 
<tr> 
<td width="279" bgcolor="#2480DB'" height='"27'""> 
<p align="center'"><b><span lang="ar-eg">&nbsp;</span><font 
color="#FFFFFF'">JIؤص‎ 
عالطتسإلا>/font<<>/b<>>/td>‎ 
<td bgcolor="#2480DB" width="94" align="center" height="27" 
valign="middle'""> 
<b> 
<font color="#FFFFFF">&nbsp;Jوأل|‎ رluëخdl</font></b></td>‎ 
<td bgcolor="#2480DB" width="94" align="center" height="27" 
valign="middle'""> 
<b> 
<font color='"#FFFFFF'">&nbspص;”أill‎ راخل|</font<‎ </b> </td> 
<td bgcolor="#2480DB" width="95" align="center" height="27" 
valign="middle'"'"> 
<b> 
<font color="#FFFFFF'">&nbsp;تÛll|‎ رايخلا>/font<>/b<>/td<‎ 
<td bgcolor="#2480DB" width="150" align="center" height="27" 
valign="middle'"'"> 
<b> 
<font color="#FFFFFF">&nbsp; اڊ‎ راخلl</font><</b></td>‎ 
<td width="111" bgcolor="#2480DB'" height="27'""> 
<P align="center'"'><b><font color="#FFFFFF">&nbsp;<span 
lang="ar-eg">Jaدagî</span></font<</b></td>‎ 
<tr> 
<% 
do while not RS.EOF 
< 
<tr> 


۸۲ 


ا ا اة انافك 


<td width="279" height="19" bgcolor="#A3C4E6"> <font 
color="#000066''><right><%=rs("qu'")%o ></td> 

<td width="61" height="19" bgcolor="#A3C4E6'"> <font 
color="#000066'""><right><<%=rs("select1'")% ></td> 

<td width="77" height="19" bgcolor="#A3C4E6'"> <font 
color="#000066'"><right><<%=rs("select2'")% ></td> 

<td width="51" height="19" bgcolor="#A3C4E6'"> <font 
color="#000066'"><right<<%=rs("select3'")% ></td> 

<td width="125" height="19" bgcolor="#A3C4E6"> <font 
color="#000066'"><right<<%=rs("select4'")% ></td> 

<td width="111" height="19'" bgcolor="#DFECES8'"'> 

<p align="center'"><bþ><a href="edit_ poll.asp?id=<%=rs("'id")%>='""> 

<font color="#000080">&nbsp;Jaدag</font><</a></b></td>‎ 

</tr> 

<% 

RS.movenext 

loop 

>< 

</table> 

<% 

set rs=nothing 

conn.Close 

Set conn=Nothin g 

end if 

>< 


ان او الف فة الحا ر كى م ات الول 
11 فإننا بحاجة إلى إنشاء الصفحة التى سيتم من خلالها إجراء عملية 
مئه. 01م ۴it‏ ولعمل ذلك قم بحفظ أحد الصفحات التى لايوجد لها قوائم 
جانبية ثم قم بكتابة الكود التالى : 
<!--#include file="conn.asp'"" -->‏ 
%< 
id=request.querystring("id"")‏ 


dim qu,select1,select2,select3,select4 
qu=request.form("qu") 


select1=request.form("'select1"") 
select2=request.form("'select2'"") 
select3=request.form("'select3'") 
select4=request.form("'select4"") 
>< 


<% 


۸٤ 


بنا الفواقع آ[الكم وو ة دات الظاع الدنامیكن 


if request.servervariables("REQUEST_METHOD")="POST" then 

if qu<>"" and select1<>"" and select2<>"" and select3<>"" and 
select4<>'"" then 

updatesql="update poll set 
Qu='" &qu&'""",select1='" &select1 &'""",select2='"&select2&'""",select3='"" &select3& 
"",select4='"&select4&'"" where ID=" & id 

set rs=conn.execute(updatesql) 

response.write "<center><b><font color=blue> ùıد—حتلl‎ Xıيلمع تمت‎ 


حlجiڊ</font<</b></center>"‎ 


else 
response.write "<center><b><font c010r=!¢d> عفوا تأڪد من أن قد قمت بملء‎ 


center>"‏ /><ط/><font/>‏ جمیع الحقول 


end if 

end if 

%> 

<% 

selectSQL=""select * from poll where id="&id 
set rs=conn.execute(selectSQL) 

%> 


الكود السابق هو الكود الخاص بإجراء عملية التحديت والذى تم كتابته 
بنفس الطريقة التى تم اتباعها مسبقا وحتى لا ندخل فى دائرة التكرار فيمكنك 
مراجعة الكود الخاص بصفحة التعديل فى بيانات الطلاب ويمكنك أيضا 
ملاحظة الإختلافات الناتجة عن اختلاف طبيعة الاتصال بقاعدة البيانات . 


وبعد الانتهاء من الخطوة السابقة قم بانشاءِ جدول بداخله Text boxs‏ 
(مربعات تص) لک تم تحرير سرال وخبار ات الاسشقاء بداظها مع مراغاة 
الالتزام بقواعد التصميم التى تم اتباعها مسبقا وذلك كما بالشكل التالى : 

سوال الاستطلاع 1 
الخيار الأول 


الخيار الثائى 


الخيار الثالف 


الخيار الرايع 


تحدبت الإستطلا ع 


1۸۵ 


ا اک ف ا الاک 


وبعد قيامك بإنشاء الجدول السابق قم بتغییر اسم كل ×0ط e×t‏ 1آ 
ای ا الکن اقا نے الد ن ر کتک کا ا کے 
سيتم طباعتها داخل ال ×0ط ×1 . فعلى سبيل المتال فى مربع النص 
الأول سيتم تغيير اسمه إلى اي وفى عںآه۷ سيتم كتاإبة 
writers) "1<‏ .onseمespا"')%>‏ وذلك بنفس الطرق التى تم اتباعها 
مسبقا وكذلك قم بتغيير ١0ا۸‏ الخاص بالصفحة إلى 


>%)"edit_ p11 .asp?14=>% =) "1d‏ و إليك الكود الخاص بإنشاء 
الجدول وكذلك القيم الخاص بكل مربع نص وذلك على النحو التالى : 


<form method="POST" action="edit_poll.asp?id=<%=rs(""id'")%o>""> 
<center> 
<table border="1" cellpadding="0" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="626" id=" Auto0Number8" 
height='""213'"> 
<tr> 
<td colspan="2" bgcolor="#2480DB'" height="27" width="625'"'> 
<font color="#FFFFFF"><bþ>&nbsp;<span lang="en- 
us">&lt;j &It; &It; &I1t; 
>/sم21<عالطتسإلا /><ط/> تعديل‎ 0n t< >/td< 
<tr> <tr> 
<td bgcolor="#A3C4E6" height="31" width="161'"><b>&nbsp; JI 
عالطتسإلا>/ط(<>/td<‎ 
<td bgcolor="#DFECES8" height="31" width="463'"'> 
<input type="text" name="qu" size="65" value='"<%oresponse.write 
rs("qu")%>'"></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" height="31" width='""161'"><b>&n bsp; الخيار‎ 
/><ط/>الأول‎ d< 
<td bgcolor="#DFECES8" height="31" width="463'"'> 
<input type="text" name="select1" size="39" 
value='"<%oresponse.write rs("'select1")%>'""></td> 
<tr> <tr> 
<td bgcolor="#A3C4E6" height="31" width='""161'"><b>&nbsp; الخيار‎ 
<ل)/><(ط/>الثانی‎ 
<td bgcolor="#DFECES8" height="31" width="463'"'> 
<input type="text" name="select2" size=""39" 
value='"<%oresponse.write rs("'select2")%>'""></td> 
<tr> <tr> 


1۸٦ 


ناء لفو افع آل الك وة دات الطاب الدينافيكى 


<td bgcolor="#A3C4E6" height="32" width='""161'"'><b>&n bsp; الخيار‎ 
<ل)/><(/>الثالٹ‎ 


<td bgcolor="#DFECES8" height="32" width="463'"> 
<input type="text" name="select3" size=""39" 
value='"<%oresponse.write rs("'select3")%>'""></td> 
<ltr> <tr> 
<td bgcolor="#A3C4E6" height="32" width='""161'"><b>&nbsp; الخيار‎ 
/><ط/>الرایع‎ d< 


<td bgcolor="#DFECES8" height="32" width="463'"'> 
<input type="text" name="select4" size=""'39" 
value='"<%oresponse.write rs("'select4")%o>'""></td> 
<tr> <tr> 
<td colspan="2" height="32" width='"625'""> 
<p align="center'"> 
<input type="submit" value=" غ‎ lطiإاl‎ يدحî'"‎ name="B1'"><br> 
&nbsp;</td> </tr> </table> 


عمل ٥٥11‏ و وع وذلك على النحو التالى : 


<% 
set rs=nothing 
conn.Close 


Set conn=Nothing 
end if 
< 


عزيزى القارىء بعد القيام بإنشاء الصفحات السابقة نكون قد انتهينا 
من تصميم وبرمجة صفحات التصويت الإلكترونى ويمكنك القيام بتغيير 
طريقة التصميم وكذلك الكود ففى مثالنا هذا يمكنك أن تقوم بإنشاء تصويت 
بثلاثة خيارات بدلا من أربعة خيارات وهذا يعتمد على مدى فهمك 
واستيعابك للموضوع والشرح وعليك أن تعرف جيدا أن هذا ليس نهاية 
المطاف فيوجد العديد من طرق كتابة الأكواد وطرق التحكم التى تعطى 
تحكم أكثر لمدير النظام فى جداول وصفحات التصويت . 
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النصل النامن 
إنشاء صفحات إدارة النظام 


بنا الفواقع آل الك وة دات الظا الدينامیكی 


إنشاء صفجات إدارة النظام 


عزيزى القارىء فى المراحل السابقة تم الإنتهاء من تصميم أكواد 
الصفحات الخاصة بإدارة الموقع وكتابتها ونحن نعلم جيداً أن هذه الصفحات 
خاصة بمديرى النظام فقط أى الذين لهم صلاحيات الوصول إلى هذه 
الصفحات لذلك سوف نقوم بإنشاء صفحة لكى يتمكن مديرى النظام من 
الدخول إلى هذه الصفحات › وسوف نقوم بعمل لوحة تحكم تضم قائمة 
بروابط هذه الصفحات » ولن يتم الوصول إلى هذه الصفحة إلا عن طريق 
تسجيل الدخول » وسوف يتم إدراج القائمة التى تحتوى على روابط صفحات 
الإدارة داخل جميع الصفحات الخاصة بمديرى النظام والتى قد تم إنشائها فى 
المراحل السابقة وسوف نقوم أيضا بإنشاء صفحة لكى يتم إضافة 
المستخدمين (مديرى النظام) من خلالها وكذلك صفحة لتغيير كلمات المرور 
الصفحات لكى لايتم معرفة عنوان الصفحة والدخول عليها من قبل أى 
شخص ليس لديه صلاحيات الدخول . 
أولاً : إنشاء الجدول الخاص بالمستخدمين : 

سوف نقوم بإنشاء جدول داخل قاعدة البيانات لكى يتم تسجيل أسماء 
المستخدمين بداخله وكذلك كلمات المرور الخاصة بهم ولعمل ذلك قم بفتح 
برنامج وومعی ۸ تم قم بإنشاء جدول ثم قم بكتابة اسماء الحقول بداخله 
على النحو التالى : 


E Tablel : Table 


namê Text‏ أ 
HH pass Texk‏ 


بعد ذلك قم بحفظ الجدول وقم بتسمیته بالاسم رنصل۸ . 


۸۹ 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 
ثانیا : إنشاء قائمة روابط صفحات إدارة الموقع : 


فى هذه المرحلة سوف نقوم بإنشاء صفحة تحتوى على قائمة تتضمن 
روابط لصفحات إدارة الموقع ومن المفترض أن يتم تصميم هذه القائمة 
داخل الصفحة الخاصة بلوحة التحكم ولكننا نرغب فى إدراج هذه القائمة 
داخل جميع الصفحات الخاصة بإدارة الموقع وذلك بالجانب الأيمن من كل 
صفحة أى لن تكون هذه القائمة مقتصرة على الصفحة الخاصة بلوحة التحكم 
فقط ولذك سوف نقوم بتصميم الصفحة الخاصة بالقائمة داخل صفحة جديدة 
أى صفحة مختلفة عن الصفحات الخاصة بالموقع وذلك تمهيداً لإدراجها 
داخل جميع صفحات الموقع عن طريق كتابة كود لاستدعائها ولعمل ذلك 
قم بالاتجاه إلى قائمة م۴1 › ثم قم باختيارالأمر ٥w‏ فسوف تظهر صفحة 
جديدة بيضاء اللون قم بحفظها بالاسم مئه. ٥ں‏ طاN‏ ثم قم بإدراج جدول 
داخل الصفحة بالإعدادات التالية : 


Insert Table 
Size 

Roms; i Lolumns: E 
LayoıJE 

Alignment: [Canter >=] ¥ Specify width: 

Border size: چ مط‎ 215 f In pixels 


fF In percent 


ell padding: 1 2 
ell spacing: 1 
Table Direction: Mone ¥ 


Sek 


[` Set as default for new tables 


Style... Lancel 


فى الشكل السابق يمكننا ملاحظة أننا قد قمنا بإعطاء أمر لكى 
يتم إدراج جدول مكون عمود واحد فقط و۷١‏ صف وقد قمنا بتحديد 
۴i1‏ 215 كعرض للجدول وقد قمنا باختيار المحاذاة Center‏ . 


اء افو افع الك وة دات الطان الذيافيكى 
بعد قيامك بإدراج الجدول قم بكتابة بيانات الروابط الخاصة بصفحات 
إدارة الموقع بداخل خلايا الجدول كما بالشكل التالى : 
و و eT‏ 
ee‏ 


۹۱ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
بعد قيامك بكتابة بيانات الروابط كما بالشكل السابق قم بتنسيق ألوان 
قمت بتغيير شكل الجدول إلى أن ظهر كما بالشكل التالى ٠‏ 


< ا حه ت التحكم الرند ئيسية 4 


:*الكنترول الأول ** 


ت و E mm‏ 
hk‏ #الكندرول الناتى* 17 


5 إدارة سل الزوار 2 


> إدارة الإستطلا 2 
ار : 


۹ إدارة درتام 


1۹۲ 


بنا الفو افع آل الك وة دات الطاب الدينافيكى 
وإليك الكود الخاص بالجدول المنسق وذلك على النحو التالى : 


<center> 


<table border="2"' cellpadding="0" cellspacing='"0" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="215" id=" Auto0Number1" 
height='"475'""> 
<tr> 
<td <td background="images/menue.gif" width="215" height='"29"" > 
<p dir="rtl]" align="center'"><font color="#000080" size="'4'"'><þ> 
<span lang="ar-eg">&nbsp; &n bsp; &nbspض; لوحم التحڪكڪم‎ 
rیسیئرلا>/spمan<>/b<>N/‎ font >/t d< 
</tr> <tr> 
<td bgcolor='"#2480DB'" height='"29'"'"> 
<p dir="'rtl" align="center'"><bþ><font size="4" 
color="#FFFFFF"><span lang="ar-eg">&nbsp;</span></font<</b><span 
lang="en-us'"><font size="4" 
color="#FFFF00'"><þ>**</b></font></span><b><font size='"4" 
color="#FFFFFF"><span lang='""ar-eg'"'>Jورتنكلا‎ 


JgîNl</span></font></b><span lang="en-us'"><font size="4" 


color="#FFFFO00"><b>**</b></font></span></td> 
</tr> <tr> 
<td height="29" bgcolor="#A3C4E6'"><b> 
&nbsp;<font color='""#000080''<vفاضإ‎ 
/>بیانات ونتائج الطلاب‎ ٤٥۸< <ل)/><ط/>‎ 
</tr> <tr> 
<td height="29" bgcolor="#A3C4E6'"><font color="#000080''><b> 
&:۸(p:مدقتم بحث‎ 
/ ) /><(ط/>( تعدیل ۔ حذف۔طباعہ‎ ٥۸< >/)d< 
</tr> <tr> 
<td height="29'" bgcolor='"#2480DB''> 
<p dir="'rtl" align="center'"><b><font size="4" 
color="#FFFFFF"><span lang="ar-eg">&nbsp;</span></font<</b><span 
lang="en-us'"><font size="4" 
color="#FFFF00"><þ>**</b></font></span><b><font size="4" 
color="#FFFFFF'"><span lang='""ar-eg'">Jورتنكلا‎ 


۹۳ 


اک اة التضافكن 


ىناثلا>/spمan<>/font<>/ا<>‎ span اang="en-us'"<>>‎ font size=" 4" 
color="#FFFFO00"><b>**</b></font></span></td> 
</tr> <tr> 
<td height="30" bgcolor="#A3C4E6'"'><font color="#000080''><b> 
&«bءم:ہفاضإ‎ 
/><(ط/>بیانات ونتائج الطلاب‎ 0۸< >/) d< 


</tr> <tr> 
<td height="30" bgcolor="#A3C4E6'"><font color="#000080''><b> 
&:۸(p:مدقتم بحث‎ 


/ ) /><(ط/>( تعدیل۔ حذف۔طباعة‎ ٥١< >/) d< 

</tr> <tr> 
<td <td background="images/menue.gif" width="215" height='"30" > 
<p dir="'rtl" align="center'"><font color="#000080"" size='"4'"><b> ةرlaإ‎ 


راوزلا>/b<>/‎ fon t< >/td< 

<tr> <tr> 
<td height="30" bgcolor="#A3C4E6'"><font 

color='"#000080''><b>& nbs حذڈف ;صم‎ 

تاقيلعتلا>/<>/font<>/td<‎ 

<tr> <tr> 
<td <td background="images/menue.gif" width="215" height='"30" > 
<p dir="rtl" align="center'"><font color="#000080"' size='"'4'"><b>aرlaإ‎ 
عالطتسإلا>/b<>/font<‎ </td> 

</tr> <tr> 
<td height="30" bgcolor="#A3C4E6'"><font color="#000080''><b> 
&ردbspم;ز حذف‎ 
/><ط/>سجلات نتائج الإستطلاع‎ on >/ d< 

<ltr> <tr> 
<td height="30" bgcolor="#A3C4E6'"><font color="#000080''><b> 
&«۸طp: تعدیل‎ 
/><(/>سؤال وخیارات الإستطلاع‎ 0n )/><ا‎ d< 

<tr> <tr> 


<td <td background="images/menue.gif" width="215" height='"30" > 


۹٤ 


ا الفة افع آل الك وة دات الطاب الدينافيكى 


<p dir="'rtl" align="center'"><font color="#000080"" size='"4'"'><þb> ةرlaإ‎ 


ماظنلا>/b<>/font<>/‎ td <> 


<tr> <tr> 
<td bgcolor="#A3C4E6" height="30'" > 
color="#000080'"'><b> 
&nbsp; 
/><(/>إضافن مستخدم جدید‎ n< >/) d< 


<tr> <tr> 
<td bgcolor="#A3C4E6" height='"30'" > 
color="#000080''"><b> 
&nbsp; 
/><(/>تغییر کلمہ المرور‎ ٥,< <ل)/>‎ 
</tr> <tr> 
<td bgcolor="#A3C4E6" height="30" > <font color="#000080'"'><b> 
&nbsp; 
حذف مستخدم‎ / ضرع>/(<>/]٥۸1<>/)‎ < 
<tr> <tr> 
<td bgcolor="#2480DB" height='"30" > 
<p dir="rtl]" align="center''><b> 
<font size="4" color="#FFFFFF'"'>&nbspض;‎ Jلچجست‎ 
جورخلا>/font><‎ </b> </td> 


</tr> </table> </center> 
فى الكود السابق يمكنك ملاحظة الأكواد التى تم تظليلها حيث‎ 
إن هذه الأكواد هى الأكواد الخاصة بتغيير خلفية الخلية ولقد تم كتابة رابط‎ 
. الخلفية بداخل الكود كما بالكود السابق‎ 


۹۵ 


ا ف ااك فة 5 فاا الاك 


بعد قيامك بتصميم الشكل الخاص بالقائمة قم بوضع روابط القائمة 


اسم الصفحة 
لوحة التحكم الرئيسية 
الكنترول الأول 
إضافة بيانات ونتائج الطلاب 
بحث متقدم / تعديل - حذف ۔ طباعة 
الكنترول الثانى 
إضافة بيانات ونتائج الطلاب 
بحث متقدم / تعديل - حذف - طباعة 
إدارة سجل الزوار 
حذف التعليقات 
إدارة الإستطلاع 
حذف سجلات نتائج الإستطلاع 
تعديل سؤال وخيارات الإستطلاع 
إدارة النظام 
إضافة مستخدم جديد 
تغيير كلمة المرور 
عرض / حذف مستخدم 


تسجيل الخروج 


بنفس الطريفة التى تم ذكرها فى الفصل الثانى وإليك اسماء الروابط الخاصة 
بالصفحات فى جدول على النحو التالى : 


الرابط الخاص بها 
Control panel.asp‏ 
لا یوجد رابط 
Add_stu.asp‏ 
Serch_view.asp‏ 
لا یوجد رابط 
Add stu1.asp‏ 
Serch_view2.asp‏ 
لا یوجد رابط 
Del comm.asp‏ 
لا یوجد رابط 
vote_del.asp‏ 
up_vote.asp‏ 
لا یوجد رابط 
Add _user.asp‏ 
Change_pass.asp‏ 
User _ del.asp‏ 


Loginout.asp 


الجدول السابق یمثل أسماء الروابط الخاصة بصفحات إدارة الموقع 


۹٦1 


والروابط المظللة هى روابط للصفحات التى سيتم إنشائها خلال هذا الفصل . 


با الفو اق آ[الكم وة ذاة الظام الذردامرك 
ثالثا : إنشاء صفحة لوحة التحكم : 

ا کک و ق اھ کے د کر 
اك نها له محل خر للك سرف تقر ك را ا 
المستخدم بأن عملية تسجيل الدخول تمت بنجاح وسوف نقوم بوضع 
مات الك ف و السقد واا تة اها اص الا 
بالقائمة داخل هذه الصفحة ولعمل ذلك قم يفت أخة الصفحات الى لايو جذ 
بها قوائم جانبية ثم قم بحفظها بالاسم pءه.1مصةم_01إtمر€0‏ وبعد إجراء 
عملية الحفظ قم بإدراج جدول مكون من عمود واحد وصف واحد فقط وذلك 
فى الجزء الأيسر للصفحة تم قم بكتابة عبارة " تم تسجيل دخولك بنجاح " 
بعد ذلك قم بإدراج جدول اخر مكون من عمود ١‏ وصف واحد ثم قم بكتابة 
التطمات الى تر اها متانة لطعة المشروع وإلك ككل الصفحة تعد كا 
ات ع ارات 


مرحباً بك فى لوحة التحكم الرئيسية 
لقد تم تسجيل دخولك بنجاح 


۰ 1) الرجاء عدم الدخول إلى لوحة التحكم الخاصة بإدارة النظام إلا فى أوقات العمل ارسي 
الخاصة بالمدرسة . ٠‏ 
)٣‏ نرجو من سيادتكم تحرى الدقة وتوخى الحذر عند القيام بعملية ادخال البيانات . 
بعد قيامك بتصميم الصفحة كما بالشكل السابق قم بوضع نقطة الإدراج 
( المؤشر ) فى الجدول الموجود بالجانب الأيمن ثم قم بالانتقال إلى وضع 
٣٧M‏ تم قم بكتابة الكود التالى : 


<!-- #include file="minue.asp'"" --> 


۹۷ 


بناء المواقع الإالكترونية ذات الطابع الديناميكى 
الكود السابق هو الكود الخاص باأستدعاء الصفحة Minue.asp‏ 
والتى تحتوى على القائمة الخاصة بلوحة التحكم حيث تم وضعها داخل 
الجزء الأيمن من الصفحة حيث قد قمنا بوضع نقطة الإدراج داخل الخلية 
حتى يتم إدراج الصفحة الخاصة بالقائمة بداخلها ولقد ظهر الكود الخاص 
بالخلية متضمنا كود الاستدعاء كما بالشكل التالى : 
{CENTEL?‏ 
{table bhorder="0" cellpadding="0" cellspacing="U" style="border-collapae: collapse"‏ 
ALL‏ 
+t vidth="dd6" valign="top" height="13" bgcolor="f#FFFFFF"Y;‏ 
$BODT BOCOLUR=#TFTFFT LEFTARGIN=N TIPMARGIN=O HARGTINIDTH=D MARTE IGHT=0‏ 
link="#FTTFFF" vlink="$FFFFFF" alink="}FFFFIT"?‏ 
#include file="uinue, azp" --*{ td‏ --41 
¢td width="751" height="13" hgcolor="$FFFFFF™;‏ 
بعد الانتهاء من تصميم الصفحة الخاصة بلوحة التحكم قم بإدراج نفس 
القائمة بنفس الطريقة ی جمیع الصفحات الخاصة بالإدارة 
والآن يتبقى لنا كيفية حماية هذه الصفحات من دخول أى شخص غير 
مسجل و هدا ها سار له في مر له متفدمة من هذا القصل. 
رابعا : إنشاء صفحة إضافة مستخدم جديد : 
فى هذه الصفحة سوف نقوم بكتابة كود إضافة بنفس الطريقة التى تم 
استخدامها مسبقا ولكن فى هذه الصفحة يختلف الأمر فى عملية الإضافة فعند 
إضافة مستخدم جديد نجد أننا بحاجه لكود لكى يتم التأكد من عدم وجود 
مستخدم بنفس الاسم ولعلك تلاحظ ذلك فى المواقع الإلكترونية فلا يمكنك 
تلاحظ فى صفحات التسجيل الموجودة بالمواقع الإلكترونية خانة لكتابة كلمة 
الصفحات الخاصة بإدارة الموقع ثم قم بحفظها بالاسم مئه.۲عوں_ ج ثم قم 


۹۸ 


بناء المواقع الإالكترونية ذات الطابع الديناميكى 
<داشافاستندرجا ا 
اسم المستخدم 
كلمة المرور 
تأكيد كلمة المرور 


بعد قيامك بتصميم الشكل السابق قم بتغيير اسم مربع النص الأول 
إلى (مصهم) ومربع النص الثانى إلى (1ءءهم) والتالث إلى (2وئجم) 
وأيضا قم بتغيير خصائص مربعات النص التى سيتم وضع كلمات مرور بها 
إلى خاصية التشفير ويمكنك عمل ذلك من خلال الاتجاه إلى الخصائص 
الخاصة بكل مربع » ثم اختيار الخيار (sمرٍ(‏ من مام ) (Pssword field‏ 
ولك کے ر اف فف داك مهات لی ع ل ا 
(مشفرة) ولاحظ أن النقاط تظهر أمام المستخدم فقط أى أنه لا يتم تشفير 
القيم داخل قاعدة البيانات و بعد ذلك قم بتغيير ال 0زا الخاص بالصفحة 
إلى (مءه.إءوں_41ه) وإليك كود إنشاء التصميم السابق على النحو التالى : 


<form method="POST" action="add_user.asp'""> 
<div align="center'"'> 
<center> 
<table border="1"' cellpadding="0"" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="500" id=" AutoNumber8" 
height='"145'"'> 
<tr> 
<td colspan="2" width="499" bgcolor="#2480DB" height="29'"'> 
<font color="#FFFFFF"><b>&nbsp;&lIt; &It; <span lang="ar- 
eع''< ن مستخدم جدید‎ فاضإ>/spa‎ n< >/b<>/ fon t< >/ td > 
<tr> <tr> 
<td width="249" bgcolor="#A3C4E6" height="29'"><font 
color="#000080'"><b><span lang=" ar-eg'">&n bsp; اسم تخد‎ </span> </b> 
</font> </td> 
<td width="249" bgcolor="#DFECES8" height="29'"><b> 
<input type="text" name="name" size="38'"'></b></td> 
</tr> <tr> 


۱۹ 


ا ا فة الط التافكن 


<td width="249" bgcolor="#A3C4E6" height="29'"'><font 
color="#000080'"'><b><span lang="ar-eg">&n bsp; valك‎ 
رورkl</span><</b></font></td>‎ 

<td width="249" bgcolor="'#DFECES8" height='"29'"><b> 

<input type="password" name="pass1" size="38'"></b></td> 

<tr> <tr> 

<td width="249" bgcolor="#A3C4E6" height="29'"><font 
color="#000080'"><b><span lang="ar-eg'">&n bsp; imمnلڪ تأڪید‎ 
رورkl</span><</b></font></td>‎ 

<td width="249'" bgcolor="#DFECES8" height='"29'"><b> 


<input type="password" name="pass2" size='"38'"'></b></td> 
</tr> <tr> 


<td width="498" colspan="2" align="center" bgcolor="#2480DB" 
height='""29''> 
<input type="submit" value=" Fêlé؛|‎ '" name="B1"'><input 
type="reset" value=" ''تفریخ الحقول‎ name='"B2'"'><>/td< 
</tr> </table> </center> 
</div> 
</form> 


بعد الانتهاء من التصميم السابق فسوف نقوم بكتابة ۸8۴ لكى يتم 
تنفيذ عملية الإضافة وسوف نقوم بكتابة الكود على النحو التالى : 


<% 
name=request.form("'name'"") 
pass1=request.form(""pass1"") 
pass2=request.form('pass2"") 
< 

<!--#include file="conn.asp'"" --> 
<% 

function addf0 


addSQL= " insert into admin (name,pass) values 
("&name&'"",'"&passl&'""") " 
conn.execute(addSQL) 
< 
<p align="center'"><b><font face="Simplified Arabic" size="3" 
color="#000080''> 
تم إضاف اسم المستخدم بنجاح‎ دقل>/٤٥١<>/ط<>/م<‎ 


۰۰ 


با الفة اف ال الك وة اة الات الدافيكى 


<% 
end function 
function checkfO0 
selectSQL="select * from admin where name='"&name&'"""" 
set rs=conn.execute(selectSQL) 
if rs.EOF then 
addf0 
else 
response.write "<b><font color=#FF0000><center> ş عفوا... يوجد تخد‎ 
/>بنفس الاسم الرجاء اختياراسمآخر‎ ٥١< "<ط/>‎ 
end if 
end function 
>< 
<% 
if name = """ or pass1 = "" or pass2 = """ then 
response.write "<b><font color=#FF0000><center> الرجاء ملء جع‎ 
لوقحلا>/fدnt<>/b<"‎ 
else 
if pass1 <> pass2 then 
response.write "<b><font color=#FF0000><ce1ter> raيق‎ Jاخدإب لقد قمت‎ 
/>مختلفت فى خان تأكيد كلمت المرورالرجاء إدخال البيانات بطريق7 صحيحد‎ ٥1< >/ <" 
else 
checkf0 
end if 
end if 
>< 
<% 
conn.Close 
Set conn=Nothing 
>< 


فى هذا الكود تم الإعلام عن المتغيرات الموجودة لدينا بنفس الطريقة 
المتبعة فى كتابة الأكواد السابقة وذلك موضح بالكود على النحو التالى : 


<% name=request.form('name"") 


pass1=request.form('pass1"") 


pass2=request.form('pass2"") 


< 


۲١1 


بناء الفواقع الالكترونية ذات الطابع الديناقيكى 

بعد القيام بالإعلام عن المتغيرات الموجودة لدينا قمنا باستدعاء 
کک ع 0 کک ف اکا 
داخل سطر كود الإضافة بأنه سيتم إدراج القيم الموجودة بمربعات النص 
(s1ئaم‏ , name‏ ) داخل الحقول (ويو۴ ,عصهم ) وبعد إجراء عملية 
Ea O TE‏ 
ا ل ك کور اكه عي ار ها 


<!--#include file="conn.asp'"" --> 
<% 
function addf0 
addSQL= "" insert into admin (name,pass) values 
("&name&'""','"&passl&'"") " 
conn.execute(addSQL) 


< 

<p align="center'"><b><font face="Simplified Arabic" size="3" 
color="#000080"'> 

<م/><ط/><۸1٥0؟/>لقد‏ تم إضافت اسم المستخدم بنجاح 

<% 

end function 
بعد القيام بكتابة كود الإضافة قمنا بكتابة كود ٤٥٥[م$ لكى يتم القيام‎ 
بمطابقة القيمة التى تم استقبالها من المتغير مه" بمحتويات الحقل‎ 
أى أنه سيتم التأكد من عدم وجود اسم المستخدم الذى تم كتابته من‎ Nهصم‎ 
قبل القائم بعملية التسجيل داخل الحقل ٥ه وقمنا بإخباره بأنه لو تم‎ 
الوصول إلى نهاية الملف دون أن يجد الاسم المسجل فسوف يتم استخدام‎ 
دالة الإضافة ( () ۴ل 4ه) آما إذا لم يتحقق ذلك الشرط وهو شرط عدم وجود‎ 
هذا الاسم ستظهر عبارة " عفواً جد مستخدم بنفس الاسم الرجاء‎ 

اختيار اسم آخر " وذلك موضح بين سطور الكود على النحو التالى : 
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با لواف ال الك وة دة الات الدينافيكى 


function checkf(0 
selectSQL="select * from admin where name='"&name&'"""" 
set rs=conn.execute(selectSQL) 
if rs.EOF then 
addf0 
else 


response.write "<b><font color=#FF0000><center> ş عفوا... يوجد تخد‎ 
/>بنفس الاسم الرجاء اختياراسمآخر‎ ٥۸< "<ط/>‎ 
end if 
end function 
< 


بعد ذلك قمنا بكتابة جملة 1۴ الشرطية لكى يتم التأكد من ملء جميع 
الحقول أى أن القائم بعملية التسجيل لم يترك حقولا فارغة وإذا قام بترك 
حقول فارغة ستظهر عبارة " من فضلك قم بملء جميع الحقول " 
وذلك موضح بين سطور الكود على النحو التالى : 


<% 


if name = """ or pass1 = "" or pass2 = "" then 


response.write "<b><font color=#FF0000><center> الرجاء ملء جع‎ 
لوقحلا>/]0n<>/b<"‎ 


وقد قمنا باستئناف عملية التحقق من البيانات المدخلة بكتابة جملة 1۴ 
لكى يتم التأكد من أن البيانات المدخلة فى مربع النص 1ءوه۴ تساوى 
البيانات المدخلة فى مربع النص 2ووه٥‏ أى أن القيمة المدخلة فى خانة كلمة 
المرون تقار ى مع الق الفخاة فى خا فاك كل المرزر ولف فة 
بإاخباره فى الكود بأنه عندما لا تتساوى (<>) القيمة المدخلة فى 
(1,۴42ءءه۴) ستظهر عبارة " لقد قمت بإدخال قيمة مختلفة فى خانة 
تأكيد كلمة المرور الرجاء إدخال البيانات بطريقة صحيحة " بعد ذلك قمنا 
اا و ك مرک ع ر اك و رع او قاد 


فا الوا الك هة داك الطاك الدرافيخن 


else 
if pass1 <> pass2 then 
response.write "<b><font color=#FF0000><center> vaيق‎ Jاخدإب لقد قمت‎ 
/>مختلفت فى خان تأكيد كلمت المرورالرجاء إدخال البيانات بطريقة صحيحد‎ ٥1< ط/>‎ <" 
else 
checkfO 


end if 

end if 

< 

<% 

conn.Close 

Set conn=Nothing 
< 


وبهذا نكون قد انتهينا من تصميم صفحة إضافة مستخدم جديد ويمكنك 
تجربة الصفحة و أيضا ملاحظة الأشكال التالية : 


22 إضافة مسسنتدم للد 


اسم المسسدد ahmed‏ | 
کل المرور mansnss‏ 


تأکید كلمة المرور mansss‏ 


عفواً ... يوجد مستخدم بنفس الإسم الرجاء اختيار اسم آخر 


: عندما لاتساوى كلمات المرور المدخلة‎ )١ 


<< إضافة مستخدم جديد 


اسع المستخدم tamiy’‏ 
كلمة المرور . 
تأگید كلمة المرور eo‏ 


لفد قمت بإدخال قيمة مختلغة فى خانة تأكيد كلمة المرور الرجاء إدخال البيانات بطريقة صحيحة 


٤ 


بناء المواقع الالكتروهة ذات الطابع الديناميكى 
۳) عندما تتساوى كلمات المرور المدخلة 


اسم المستخدم omar arab‏ 
كلمة المرور mensnss‏ 
تأگید كلمة المرور sons‏ 


تريخ الحفول 


لقد تم إضافة اسم المستخدم ينجاح 
)٤‏ عندما لايتم إدخال أى قيم داخل مربعات النص : 


<< إضافة مستخدم جديد 


من فضلك قم بملء جميع الحقول 


خامسا : إنشاء صفحة تغيير كلمة المرور: 

فى هذه الصفحة سوف نقوم بكتابة كود لكى يتمكن المستخدم من القيام 
بتغيير كلمة المرور الخاصة به ومن خلال هذا الكود سيتم التأكد من أن 
السككم مكل بالل و نكا سك الاك من صحة كله المرور اة 
وكذلك سيتم تأكيد كلمة المرور الجديدة فأنت تعلم جيداً عزيزى القارىء أنه 
عند قيامك بتغيير كلمة مرورك فى أى من المواقع الإلكترونية فالطبع 
سيطلب منك اسم المستخدم وكلمة المرور القديمة وأيضا كلمة مرور جديدة . 

ولإنشاء هذه الصفحة قم بفتح أحد الصفحات الخاصة بإدارة الموقع ثم 
قم بحفظها بالاسم مءه.ءوهوم_مع 4۸ط تم قم ولا بتصميم الشكل التالى : 


ات اليم | 
كلمة المرور القديمة ا 
كلمة المررر الجديدة جج ج ج 
تأكيد كلمة المرور الجديدة eT‏ 


ا ا اا ف ا الاك 


بعد قيامك بتصميم الشكل السابق قم بتغيير اسم مربع النص الأول إلى 
(٠mهم)‏ واسم مربع النص الثانى إلى (ووهملاه) واسم مربع النص التالث 
إلى (1ءءهص) واسم مربع النص الرابع إلى (2ءوهم) وأذكرك بالاتجاه إلى 
خصائص مربعات النص التى سيتم كتابة كلمات مرور بها واختيار الخيار 
(sمر)‏ من أمام ( 14عاگ ord‏ wءء۴)‏ ثم قم بتغيير ال 0ا۸ الخاص 
بالصفحة إلى ميه.ویةم_معمهطح وإليك كود تصميم الشكل السابق على 
النحو التالى : 


<form method=" POST" action="change_pass.asp'""> 
<div align="center"> <center> 
<table border="1"" cellpadding="0" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="500" id=" Auto0Number8" 
height='"145'"'> 
<tr> 
<td colspan="2" width="499" bgcolor="#2480DB'" height='""29'"'> 
<font color="#FFFFFF"><bþ>&nbsp;&lt; &It; <span lang="ar- 
تغيير كلمة المرور<"عء‎ 
نیمدختسملل>/spمan<>/b<>/‎ font >/td< 
<tr> <tr> 
<td width="249" bgcolor="#A3C4E6" height="29'""><font 
color="#000080"><pþ><span lang=" ar-eg'"> &nۆspص;pşدخ†تسdkا اسم‎ >/spa n< <ط/>‎ 
</font> </td> 
<td width="249'" bgcolor="#DFECES8" height="29'"><b> 
<input type="text" name="name" size="38'"></b></td> 
<tr> <tr> 
<td width="249" bgcolor="#A3C4E6" height="29"><font 
color="#000080'"><b><span lang=""ar-eg'">&n ۆbspڪ:رورملا ڪلم‎ 
vaدall</span></b></font></td>‎ 
<td width="249" bgcolor="#DFECES8" height="29'"><b> 
<input type="password" name="oldpass" size="38'"'></b></td> 
<tr> <tr> 
<td width="249" bgcolor="#A3C4E6" height="29'""><span lang="ar- 
eg'"> 


<font color="#000080'"><b>&nbsp;</b></font></span><font 
color="#000080'"><b><span lang='""ar-eg'">&nbspصi:رورم)لا كلمم‎ 

ةديدجلا>/spمan<>/b<>/font<>/td<‎ 

<td width="249" bgcolor="#DFECES8" height="29'"'> 

<input type="password" name="pass1" size="38'"></td> </tr> 


ناء الفة افع آل الك وة دات الطاب الدينافيكى 


<td width="249" bgcolor="#A3C4E6" height="29"><font 
color="#000080'"><bþ><span lan g="ar-eg'">&n ۆsp:رورملا تأڪيد ڪلم‎ 

ةديدجلا>/spمan<>/b<>/font<>/td<‎ 

<td width="249'" bgcolor="'#DFECES8" height="29'"><b> 

<input type="password" name="pass2" size="38'"'></b></td></tr> 


<tr> 
<td width="498'" colspan='"2" align="center" bgcolor="#2480DB" 
height='""29''> 
<input type="submit" value=" yg " name="B1'""><input 
type="reset" value=" ''تفريخ الحقول‎ name='"B2'"'><>/t)d< 
</tr> </table> 
</center> </div> </form> 


بعد الانتهاء من التصمیم السابق فسوف نقوم بکتابة کود ۸8۴ لکی يتم 
تنفيذ عملية تغيير كلمة المرور وإليك الكود على النحو التالى : 


<!--#include file="conn.asp'"--> 
<% 
function updatef) 
updateSQL= " update admin set pass = '"&passl1&'""" where 
name='"&name&'" " 
conn.execute(updateSQL) 
< 
<p align="center'"><b><font face="Simplified Arabic" size="3" 
›٥1٥۲='"'#000080''< تم تغییر کلمم المروربنجاح‎ >/ ٥1< >/(< > <م/‎ 
<% 
end function 
function checkf(0 
selectSQL="select * from admin where name='"&name&'"""" 
set rs=conn.execute(selectSQ L) 
if rs.EOF then 
response.write "<b><font color=#FF0000><ce1ter> |i لایوجد مستخدم‎ 
pull </font></b>" 
else 
if oldpass=rs(""pass'"") then 
updatefO) 
else 
response.write "<b><font color=#FF0000><center> JÈ ڊإد‎ pa من فضلك‎ 
كلم المرورالقديم م بشكل صحيح‎ >/ 0١< >/ <" 
end if end if 
end function 
name=request.form("name"") 
oldpass=request.form(""oldpass") 
pass1=request.form('pass1"") 


الاکن 


pass2=request.form('pass2"") 
< 


<% 
if name = """ or oldpass = "" or pass1 = "" or pass2 = "" then 
response.write "<b><font color=#FF0000><center> من فضلك قم بإد خال جع‎ 
/>الحقول‎ 0n >/b<" 
else 
if pass1 <> pass2 then 
response.write "<b><font color=#FF0000><ce1t{er> raيق‎ Jاخدإب لقد قمت‎ 


"< /> <0 />مختلفX¥‏ فى خانى تأاڪيد كلم المرورالرجاء إدخال البيانات بطريقہ صحيعحہ 

else 
checkfO0 

end if 

end if 

00< 

<% 

conn.Close 

Set conn=Nothing 

00< 


ف ا سط ر اك ك اة أا ف فا ك رة لاض 
اطا كر ال ب غه ك د ر اء ل الخدت وف فا 
بإخباره بأن عملية التحديث سوف تتم عندما تتساوى محتويات الحقل ووه 
مع القيمة التى سيتم استقبالها من المتغير 1ءوه۴ وذلك عندما يتحقق شرط 
تساوى الحقل ممه" مع القيمة التى سيتم استقبالها من المتغير عدصNNa‏ 
وسوف تظهر عبارة " تم تغيير كلمة المرور بنجاح " عندما يتحقق هذا الشرط 
وذلك موضح فى بداية الكود على النحو التالى : 


<!--#include file="conn.asp'"--> 
<% 
function updatef) 
updateSQL= " update admin set pass = '"&passl1&'""" where 
name='"&name&'""" " 


conn.execute(updateSQL) 

%< 

<p align="center'"><b><font face="Simplified Arabic" size="3" 
›٥1٥۲='"'#000080''< تم تغییر کلمم المروربنجاح‎ >/٤ ٥1< <م/><(ط/>‎ 

<% 


end function 


أ فة اف الك وة اة لكان الذ فيك 
بعد القيام بكتابة كود التحديت قمنا بكتابة كود ٤ءء1م$‏ لكى يتم مطابقة 
القيمة التى تم استقبالها من المتغير ٠ه‏ مع محتويات الحقل مره" أى 
أنه سيتم التأكد من وجود اسم المستخدم الذى تم كتابته من قبل القائم بعملية 
تغيير كلمة المرور وذلك داخل الحقل مه" وقمنا بإخباره بأنه لو تم 
الوصول إلى نهاية الملف دون أن يجد الاسم المسجل فسوف تظهر عبارة 
"لايوجد مستخدم بهذا الاسم" وقمنا أيضا باستئناف عملية التحقق عن طريق 
كتابة جملة 1۴ الشرطية لكى يتأكد من أن القيمة التى تم استقبالها من المتغير 
oldpss‏ تتساوی مع محتويات الحقل وووه٥‏ فاذا تم التأكد من هذا الشرط 
فسوف يتم تنفيذ عملية تحديث البيانات والتى تم كتابتها فى بداية الكود أما 
ا کا رر اف مو الت المر د 
الحقل ووه۴ فسوف تظهر عبارة " من فضلك قم بإدخال كلمة المرور 
القديمة بشكل صحيح " وبغداذلك فمتا بإنهاء الدالة وذلك موضخ بين سطور 
الكود على النحو التالى : 


function checkf)0 
selectSQL="select * from admin where name='"&name&'"""" 
set rs=conn.execute(selectSQ L) 
if rs.EOF then 
response.write "<b><font color=#FF0000><center> |ذiڊ لایوجد مستخدم‎ 
wll </font></b>" 
else 


if oldpass=rs(""pass'"") then 
updatefO) 
else 
response.write "<b><font color=#FF0000><center> JÈ ڊإد‎ pa من فضلك‎ 
كلم المرورالقديمہ بشكل صحيح‎ >/ 0١< >/ <" 
end if end if 
end function 


بعد ذلك قمنا بالإعلام عن المتغيرات الموجودة لدينا وذلك 
على النحو التالى : 


name=request.form("'name"") 
oldpass=request.form(""oldpass") 


pass1=request.form('pass1"") 
pass2=request.form('pass2"") 
< 


E‏ اق 
بعد ذلك قمنا بكتابة جملة 1۴ لكى يتم التأكد من وجود بيانات داخل 

مربعات النص وكذلك قمنا بكتابة جملة ۴[ أخرى لكى يتم التأكد من أن 

مدخلات 1ءیھP‏ تتساوی مع مدخلات P2‏ وقد قمنا بإنھاء ۴[ وإغلاق 

الاتضل ولك کل انحر اتال : 

<% 


if name = "" or oldpass = "" or pass1 = "" or pass2 = "" then 
response.write "<b><font color=#FF0000><center> من فضلك قم بإدخاJ جع‎ 


لوقحلا>/]0nt<>/b<"‎ 
else 


if pass1 <> pass2 then 
response.write "<b><font color=#FF0000><ce1ter> rميق‎ Jلاخ لقد قمت بإد‎ 


٥۸1< >/ <"‏ />مختلفة فى خانة تأاكيد كلمة المرورالرجاء إدخال البيانات بطريقة صحيحة 


else 
checkfO 
end if 
end if 
>< 
<% 
conn.Close 
Set conn=Nothing 
< 


وبذلك نکون قد اند نتهينا من تصميم ١‏ أصفحة الخاصة بتغبير كلمة 
المرور للمستخدم ويمكنك تجربة الصفحة وملاحظة الأشكال التالية : 


: عند وجود خطأ باسم المستخدم‎ )١ 


<< تغبير كلمة المرور للمستخدمين 


اس المسسحدم fathy‏ 

كلمة المرور القديمة seuss‏ 
كلمة المرور الجديدة wesesnnne‏ 
تأكيد كلمة المرور الجديدة eos]‏ 


بوج مستكم بهدا اسم 


11۰ 


با الغو اق الك وة دة الان الخرا كى 


<< تغيبر كلمة المرور للمستخدمين 
اسم المستخدم 


omar oraby' 


كلمة المرور القديمة 


كلمة المرور الجديدة 


تأكيد كلمة المرور الجديدة 


من فضلك قم بإدخال كلمة المرور القديمة بشكل صحيح 


۳) عندما يتم إجراء عملية التغيير بنجاح : 


اسم المستخدم 
كلمة المرور القديمة 
كلمة المرور الجديدة 


تأكيد كلمة المرور الديدة 


تم تفبير كلمة المرور بنجاح 


٤)عندما‏ لا تتساوى كلمات المرورالجديدة مع بعضها : 


كلمة المرور القديمة 


ahmed 
IIIIII 


كلمة المرور الجديدة 


تأكيد كلمة المرور الجديدة 


sense] 


لد قمت بإدخال قيمة مختلفة فى خانة تأكيد كلمة المرور الرجاء إدخال البيانات بطريقة صحيحة 

سادسا : صفحة حذف المستخدمين: 

فى هذه الصفحة سوف نقوم بكتابة كود لكى يتمكن المستخدم من القيام 
الفا اة حف الم تفن و م اا ل تلت ف طرهة غاب 
الكود عن الصفحة الخاصة بحذف نتائج التصويت والتى تم إنشائها فى 
الققل الاق ر حى ب اء هذه الفح شنرف قر اء فن 
الصفحة الأولى خاصة بعرض أسماء المستخدمين من قاعدة البيانات وسوف 
نقوم بتسميتها بالاسم مءه.1ءل_۲ءوں والصفحة الثانية خاصة باستقبال 
أوامر الحذف من الصفحة الأولى وسوف نقوم بتسميتها بالاسم مروه.12عل 
وسوف نبداً بإنشاء الصفحة الأولى وهى الصفحة الخاصة بعرض اسماء 
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بناء المواقع الالكترونية ذات الطابع الديناميكى 
المستخدمين من الجدول ماص ۸ ولعمل ذلك قم بحفظ أحد صفحات إدارة 
الموقع بالاسم مئه.1ءل_۲عوں ثم قم بإنشاء الشكل التالى : 
خذف 
الشكل السابق مئل الجذرل الى ستم غرضن اسما المستخدمين بذاأخله رف 
قمنا بربط كلمة ( حذف ) بالرابط التالى : 
وذلك كما هو الحال فى الصفحة الخاصة بحذف نتائج التصويت 
وبذلك نكون قد انتهينا من تصميم الجدول وبعد ذلك سيتم كتابة كود tعم[م؟‏ 
لكى يتم تحديد أسماء المستخدمين من الجدول ص۸ وسوف نقوم بكتابة 
اسم الحقل (name)‏ فى الخلية التى نر غب فى ظهور أننضاءَ المستخدمين بها 
وأيضا سنقوم باستخدام الحلقة 50 وذلك بنفس الطريقة التى تم استخدامها 
أثناء إنشاء صفحة حذف نتائج التصويت وإليك كود إنشاء الجدول متضمنا 
آکواد ۸8۶۴ على النحو التالى : 
%< 
selectSQL="select * from admin "‏ 
set rs=conn.execute(selectSQ L)Yo>‏ 
%< 
if RS.EOF then‏ 


response.write "<center><font c010r=r!¢d> عقgفlڊ‎ iHlجسم لایو جد نتائج‎ 


</font></center>"" 
else 
< 
</div> 


<div align="center'"> 
<center> <p></p> 
</center> 


</div> 
<div align="center'"> 
<center> 
<table border="1"" cellpadding="0" cellspacing="0" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="527" id=" AutoNumber10" 
height="53'"'> 
<tr> 


1۲ 


اء الفة افع آل الك وة دات الطاب الدينافيكى 


<td bgcolor="#2480DB" width="345" height="26" align="center'""> 
<font color="#FFFFFF"><bþ>&nbsp;<span lang="ar-eg"> pl 
مدختسdgلا>/span<>/b<>>/font>‎ </td> 
<td bgcolor="#2480DB" width="177" height="26" align="center'"> 
<font color="#FFFFFF"><þ><span lang="ar-eg'"'>&nbsp; Aذiح‎ 
مدختسdgلا>/span<>/b<>>/font>‎ </td> 
</tr> 
<% 
do while not RS.EOF 
%< 
<tr> 


<td bgcolor="#DFECES8" width="345" height="27"> <font 
color="#000066'""><center><%=rs("'name")%></td> 
<td bgcolor="#DFECES8" width="177" height='"27'"'> 


<p align="center'"'><font color="#000080'"'><b><span lang="ar-eg"'> 
<a href="del2.asp ?id=<%o=rs("'id'")%>'""><font 
color="#000080''>éj></font></a></span></b></font></td> </tr> 
<% 
RS.movenext 
loop 
%>< 
</table> </center> 
<% 
set rs=nothing 
conn.Close 
Set conn=Nothing 
end if 
%>< 


وبعد الانتهاء من كتابة كود هذه الصفحة قم بفتح الصفحة ٤ del.asp‏ 
تم قم بحفظها بالاسم موه.12ءعل تم قم بتغييركود الحذف إلى الكود التالى : 


deleteSQL = "delete * from admin where id=" &id 
conn.execute(deleteSQL) 


response.redirect "user_del.asp" 


1۳ 


الا الك هة دة الكطاة الدوافين 


کما بالشکل التالی : 
ahmed‏ حذف 
omar oraby‏ حذف 
hatem‏ حذف 
nisreen‏ حف 


سابعا : إنشاء صفحات تسجيل الدخول للمستخدمين : 


نحن الأن بصدد إنشاء صفحات لكى يتمكن المستخدم من الوصول إلى 
لوحة التحكم من خلالها وسوف نقوم بعمل صفحتين الصفحة الأولى لعرض 
ا ل و ا و و ی 
بالاسم pكه.”1عها_«iص۸4‏ والصفحة الثانية خاصة بالتحقق من صحة 
البيانات المدخلة وسنفوم بتسميتها بالاسم مه.رإ٤‏ ٣1اه‏ وسوف نبداً أولا 
بإنشاء الصفحة الأولى وهى الصفحة pءه.٣1عها_‏ ,اص۸ ولإنشاء هذه 
الصف قر نط ا الفقحاكت الى بوخد ما ترات اة ا 
0gi.9pا_ ۸min‏ ثم قم بتصمیم الشکل التالی : 

اسم المستخدم اص 

aT‏ ڪڪ 

بعد قيامك بتصميم الشكل السابق قم بتغيير اسم مربع النص الأول إلى 
الاسم مصعم ومربع النص الثانى إلى الاسم ووه ثم قم باختيار الخيار 
ئ من أمام ل1٥۴1 ord‏ wویه۴‏ وذلك فی مربع النص الثانی ثم قم بتغيیر 
ال وم1† ء۸ الخاص بالصفحة إلى معه. رم 11ج ولقد قمنا بكتابة صفحة 
التحقق فى ال "۸)10 الخاص بهذه الصفحة لأنه سوف يتم كتابة شروط 


1٤ 


بناء المواقع الالك وة ذات الطابع الديناميكى 
التحقق الخاصة بالبيانات المدخلة فى تلك الصفحة وإليك كود تصميم الجدول 
على النخوالتالى ٠‏ 


<form method=" POST" action="validentry.asp'"> 
<div align="center"> <center> 
<table border="1" cellpadding="0" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="500" id=" AutoNumber8" 
height='"110'""> 
<tr> 
<td width="498" colspan='"2" height="27" bgcolor="#2480DB''> 
<font color="#FFFFFF'"><pb><span lang="en-us">&lt; &It; &1t; 
تسجيل الدخول إلى<«دم؛/>‎ 
التحكم‎ vحول>/ط<>/‎ fon t< >/ {d< 
<tr> <tr> 
<td width="250" height="29" bgcolor="#A3C4E6'"'><b><font 
color="#000080">&nbsp;pwl 
مدختسdلا>/font<>/ط<>/)d<‎ 
<td width="250" height="29" bgcolor="#DFECES8"'> 
<input type="text" name="name" size="30'"></td> 
<tr> <tr> 
<td width="250" height="27" bgcolor="#A3C4E6'"><b><font 
color="#000080''>&nbspص;rملڪ‎ رورkl</font<</b></td>‎ 
<td width="250" height="27" bgcolor="#DFECES8'"'> 
<input type="password" name="pass" size="30'"></td> 
<tr> <tr> 
<td width="498" colspan="2" align="center" height='"27" 
bgcolor="#2480DB'"'> 
<input type="submit" value=" لaë‡-دأ| ""'تسجيل‎ name='" B1'"'>>input 
type="reset" value=" ''تفريخ الحقول‎ name='"B2'"'><>/td< 


</tr> </table> </center> </div> </form> 


بعد الانتهاء من تصميم الجدول فسوقف نقوم فى هذه الصفحة بكتابة 
الرسائل التى ستظهر للمستخدم عندما لا تتتحق الشروط الموجودة بالصفحة 
entr.9۳pل ai‏ أى أن هذه الصفحة ستكون خاصة بعرض رسائل 
الأخطاء فقط التى تنتج عن صفحة التحقق وإليك الكود الخاص برسائل 
الأخطاء على النحو التالى : 


11۵ 


اا اك ف الط الضافكن 


<% 

error=Request.querystring(""error'") 

if error <>'""" then 

if error="Name_Null" then 

Response.write "<b><font color=#FF0000><CENTER> pl Jiخدإ‎ ءlجرلا‎ 
مدختسgلا>/10nt<>/b<"‎ 

Else 

if error="Pass_Null" then 

Response.write"<b><font color=#FF0000><CENTER> raڪۍكڪ‎ Jاخدا الرجاء‎ 
/>الرور‎ font "<ط/>‎ 

Else 

if error="Name_Entry"' then 


Response.write""<b><font color=#FF0000><CENTER> pl Îطخ يوج‎ 
مدختسgلا>/‎ 101< >/b<" 

Else 

if error="Pass_Entry" then 

Response.write'""<b><font color=#FF0000><CENTE R> ialڪكڪڊ يوجد خطأ‎ 


رورلا>/font<</‎ b>" 
end if 
end if 
end if 
end if 
end if 
< 


فى الكود السابق قمنا باستخدام جمل 1۴ الشرطية لكى يتم كتابة رسائل 
الأخطاء التى ستظهر عندما يكون اسم المستخدم به خطأ أو لم يتم إدخال اسم 
المستخدم وكذلك عندما تكون كلمة المرور بها خطأ أو لم يتم إدخال كلمة 
المرور وقد تم كتابتها فى هذه الصفحة ؛ لأنه عندما لا تتحقق الشروط 
الموجودة فى صفحة التحقق ستظهر الرسائل فى هذه الصفحة , 

E A E, 
وفی هذه األصفحة‎ validentry.asp كتابة كود الصفحة الثانية وهی صفحة‎ 
ثم إعادة‎ Admin _login.asp سيتم استقبال المدخلات من الصفحة‎ 
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اء لواف آل الك وة دات الان الذينافيكى 


الإرسال مرة أخرى إلى مئه.”iعه1_«نصل۸‏ إذا كان هناك أخطاء فى 
البيانات المدخلة أو الانتقال مباشرة من صفحة التحقق إلى لوحة التحكم إذا لم 
يتم إيجاد أخطاء فى البيانات المدخلة وللقيام بكتابة الكود قم بفتح صفحة 
جديدة › ثم قم بحفظها بالاسم مئه. ر۲٤٣‏ لاج » ثم قم بالانتقال إلى الوضع 
اګ » ثم قم بكتابة الكود التالى : 


<!--#include file="conn.asp'"--> 

<% name=Request.form('name") 
Pass=Request.form("" Pass'"") 

if name=""" then 
response.redirect("admin_login.asp?error=Name_Null") 
else 
if Pass=""" then 
response.redirect("admin_login.asp?error=Pass_Null") 
else 
set rs=conn.execute("'select * from admin where Name='"&name&'"""") 

if rs.eof then 


response.redirect("admin_login.asp?error=Name_Entry'") 
else 

if rs("'pass'"")<>pass then 
response.redirect("admin_login.asp?error=Pass_ Entry") 


else 
Name_Cooky=request.cookies("Name'"") 
if Name_Cooky <> Name then 
response.cookies('"'Name'")=Name 
end if 
response.redirect("control_panel.asp"") 
end if 
end if 
end if 
end if 

rs.close 

set rs=nothing 

conn.close 

set conn=nothin g 

>< 


الكود السابق هو كود ۸$۲ فقط لأن هذه الصفحة لن تعرض أى 
بيانات للمستخدم وإنما سيتم إجراء عمليات التحقق فقط من خلالها ويلاحظ 
فى بداية الكود بأننا قد قمنا بوضع كود الاتصال بقاعدة البيانات ثم قمنا 


11% 


م د الا 
بالإعلام عن متغييرين هما المتغير مسج" و المتغير ووه" وذلك موضح 
بالكود على النحو التالى : 


<!--#include file="conn.asp'"--> 
<% name=Request.form('name") 


Pass=Request.form(" Pass'"") 


بعد ذلك قمنا بكتابة جملة 1۴ لكى يتم التحقق من أن اسم المستخدم قد 
تم وضعه بالفعل داخل مربع النص(ع٣هہ)‏ أم لم يتم وضعه وقمنا بإخباره 
بأنه عندما يتحقق ذلك الشرط وهو الشرط الذى يقول أن اسم المستخدم لم يتم 
وضعه داخل مربع النص سيتم الانتقال إلى الصفحة pئه.,giه1‏ _ admin‏ 
واظهار الخطاً Name null‏ وذلك الخطاً عبارة عن رسالة تنبه المستخدم 
بأنه لم يقوم بإدخال اسم المستخدم داخل مريع النص وذلك موضح بالكود 
على النحو التالى : 


if name="""" then 


response.redirect("admin_login.asp?error=Name_Null") 


بعد ذلك قمنا بكتابة شرط لكى يتم التحقق من أن كلمة المرور قد تم 
وضعها داخل مربع النص (ءءهم) أم لم يتم وضعها وقمنا بإخباره بأنه 
عندما يتحقق ذلك الشرط وهو الشرط الذى يقول أن كلمة المرور لم يتم 
وضعها داخل مربع النص سيتم الانتقال إلى الصفحة مئج.,giه1 admin‏ 
وإظهار الخطا ااuںم_ووهم‏ كما هو الحال فى شرط التحقق من إدخال اسم 
الت وة مر ك كرد على الخو الال" 


if Pass=""" then 


response.redirect("admin_login.asp?error=Pass_Null") 


ويلاحظ فى الكود كتابة موإم ونقصد من كتابة هذه الكلمة الانتقال إلى 
شرط التحقق التالى أى أنه عندما لا يتحقق الشرط الأول فسوف ينتقل إلى 
التالى ثم الذى يليه .... وهكذا . 


1۸ 


با الفوافع الك وة دات الطاب الدينافيكى 

عد ذلك مالذى سيفعله ذا تم كقابة قم داخل مز يعات النضن فالمفتزطن 
أنه سيقوم بالبحث فى قاعدة البيانات للتحقق من أن القيم التى تم إدخالها فى 
مربعات النص موجودة بالفعل أم أنها غير موجودة ولذلك قد قمنا بكتابة كود 
See)‏ لكى يتم مطابقة اسم المستخدم بالاسم الموجود بقاعدة البيانات 
وا لفو ع ا ا ات اى ع و لاق 
الاسم المدخل مع الاسم الموجود داخل قاعدة البيانات فسيتم الانتقال إلى 
صفحة pءه.”اعه]_«نص‏ ل۸ ثم إظهار الرسالة الخاصة بوجود خطاً فى 
اسم المستخدم وهى رسالة رم ٠ه‏ وفى نفس الوقت سيتم مطابقة 
فة اوور اتةه اب الست ولك فد فذا كان زط أخر لكى 
به التحقق من وجو كلمة المرؤر يقاغدة النبائات ومطافتها باسح الم تخدذه 
وإذا لم يتم العثور عليهافسوف يتم الانتقال أيضا إلى صفحة 
spه.0ginا_ Admin‏ وإظهار الرسالة الخاصة بوجود خطأ فى كلمة 
المرور وهى رسالة رإرء_ووه۴ ويلاحظ أنه لن يتم إرسال القيم إلى 
صفحة pیھ.ہذعه1_منصل۸‏ إلا إذا تم التأكد من عدم تحقق أحد الشرطين 
أى عندما يصل إلى نهاية الملف (۴هع) انگ گە 4مع ولا يتحقق أحد 
الشرطين وذلك موضح بالكود على النحو التالى : 

else 


set rs=conn.execute("'select * from admin where Name='"&name&'"""") 
if rs.eof then 


response.redirect("admin_login.asp?error=Name_Entry'") 


else 
if rs("'pass'"")<>pass then 
response.redirect("admin_login.asp?error=Pass_ Entry") 


بعد ذلك ما الذى سيفعله إذا لم يتحقق جميع الشروط التى تم كتابتها أى 
أن المستخدم قام بإدخال بيانات صحيحة ؟ ففى هذه الحالة سيقوم أولا بحفظ 
اسم المستخدم (name)‏ فى متغير تابت بين الصفحات اسمه Coo0ky‏ لکی 
يتم التأكد فيما بعد أن المستخدم قام بإدخال اسم المستخدم وكلمة المرور 


14 


ف اک ف 5 اتاك 


ن فة لی کف اکر ی ووت الک ن ى 
الاسم من ال ومi)مه٣‏ وذلك موضح بالكود كالتالى : 

ا ا ان ا 
EE O a E Sa‏ 
وذلك موضح بسطور الکود کالتالی : 


if Name_Cooky <> Name then 
response.cookies('"'Name'")=Name 
صفحات الإنترنت المفتوحة حيث عندما يقوم ا لمستخدم بإعادة فتح | لمتصفح‎ 
Control _ pane1.aومp الإنتقال إلى صفحة لوحة التحكم وهى الصفحة‎ 
: وذلك موضح بالكود على النحو التالى‎ 
وبعد ذلك قمنا بإغلاق جمل 1۴ وإنهاء عمل المتغير وع وإنهاء‎ 
: الإتصال وذلك على النحو التالى‎ 


end if endif endif end if 
rs.close 
set rs=nothing 


conn.close 
set conn=nothing 
00< 


وبذلك نكون قد انتهينا من تصميم صفحات تسجيل دخول المستخدمين 
ويمكنك ملاحظة الأشكال التالية ٠:‏ 


۰ 


بنا الفواقع آلالكم وة دات الظاع الديناموكی 


: عند محاولة إدخال اسم المستخدم غير صحيح‎ )١ 
تسجيل الدخول إلى لوحة النحكم‎ < 
اسم المسنحدم‎ 
كلمة المرور‎ 


nisreen ramadan 


: عند محاولة إدخال كلمة مرور غير صحيحة‎ )١ 


#< تسجيل الدخول إلى لوحة التحكم 


اسم الخدم 
كلمة المرور 


يوجد خطاً بكلمة المرور 


ٔ( عندما لایتم ادخال اسم المستخدم . 


۳o۳ |‏ ۳ اا1 


اسم المستخدم 


كلمة المرور 


الرجاء إإخال إسم المستخدم 


)٤‏ عندما لايتم ادخال كلمة المرور: 


<< تسجيل الدخول إلى لوحة التحكم 


ET a 


الرجاء ادخال كلمة المرور 


۳٢۱ 


بناء المواقع الالكترونية ذات الطابع الديناميكى 
ثاهناً : حماية صفحات إدارة الموقع : 


بعد قيامك بتجربة عملية تسجيل الدخول قم بإغلاق المتصفح ثم أعد 
فتحه مرة أخرى ثم قم بكتابة مسارالصفحة pءه.e1صaم_Contr01‏ فى 
شريط ووه ۲ل ل۸ الموجود أعلى المتصفح فستجد أن الصفحة تم فتحها بدون 
طلب تسجيل الدخول ولتفادى ذلك فسوف نقوم بكتابة كود أعلى صفحة 
9 مهم _ntr01دC‏ لكى يتم التأكد من قيام المستخدم بتسجيل الدخول 
وذلك عن طريق اختبار كود رمه الذى تم إنشائه فى صفحة 
vali dentry‏ وذلك على النحو التالى : 

<% 


Name_Cooky=Request.cookies("Name") 
If Name_Cooky="" Then 


response.redirect ("admin_login.asp") 
End If 
>< 


فى الكود السابق تم طلب اسم المستخدم من المتغير yوogkه٣C‏ 
حيث قمنا بإعطاء أمر بالتأكد من وجود اسم المستخدم بالمتغير رgمه٥٣‏ 
أو عدم وجوده وإذا لم يتم العثور عليه أى أن المتغير رkمهC‏ فارغ سيتم 
التوجه إلى الصفحة مئه.”أعه[_«نص كه وهى الصفحة الخاصة بتسجيل 
الدخول (طلب اسم المستخدم وكلمة المرور) » ويمكنك نسخ نفس الكود فى 
جميع صفحات إدارة الموقع حتى لايتم الدخول عليها مباشرة عن طريق 
اه Address‏ ويمكنك أيضا التأكد من ذلك بنفسك عن طريق إغلاق 
المتصفح ثم إعادة فتحه وكتابة مسارالصفحة Control panel.asp‏ 
فى شريط وو٥إل‏ ل۸ فستجد أنه تم إعادة توجيهك إلى صفحة تسجيل 
الدخول تلقائيا . 


۲ 


ا فة اف الك وة اة الطان اليافيكى 


تاسعا : إنشاء صفحة تسجيل الخروج : 
لإنشاء هذه الصفحة قم بفتح صفحة جديدة ثم قم بحفظها بالاسم 
gin 0u‏ ] ثم قم بالانتقال إلى الوضع H۲۷1‏ » ثم قم بكتابة الكود التالى : 


<% 


response.cookies(""adminlogin")="loginof" 


response.redirect("admin_login.asp'") 
>< 


۳ 


الفصل التاسع 
تصميہ صفحات البحث 
الخاصة بالطلاب 


بنا الفواقع آل الك وه ة دات الظا الدينامیكی 


تصميم صفحات البحث الخاصة بالطلاب 


کے وا اال د ا ان اد ا ا ت 
سنقوم بتصميم صفحات للبحث عن رقم جلوس الطالب وذلك حسب الاسم 
وسوف نقوم أيضا بتصميم صفحات لعرض نتائج الطلاب وذلك حسب 
الصف ورقم الجلوس وسوف نقوم بتصميم هذه الصفحات فى مراحل على 
النحو التالى : 
أولا : صفحات الحصول على أرقام جلوس الطلاب : 

فى هذه المرحلة سوف نقوم بإنشاء صفحتين الصفحة الأولى هى 
صفحة مpءه.ل1_طءإهعS‏ وهى الصفحة الخاصة بالبحث عن رقم جلوس 
الطالب وسوف يتم إجراء عملية البحث عن طريق كتابة الاسم الرباعى 
الطالب والصفحة الثانية هى صفحة pكة.‏ انق وط3 وهه الفحة 
لعرض نتائج البحث وسوف يتم كتابة كود للبحث فى الجدولين , 1اuوم)‏ 
( 2٤u1ءهإ‏ وسوف نبداً بإنشاء الصفحة الأولى وذلك عن طريق حفظ أحد 
الصفحات ذات القوائم الجانبية بالاسم مئه. ل1 _1١4۲ع$‏ » ثم إنشاء تصميم 
للبحث كما بالشكل التالى : 


اذل الإسم الرباعى عرض رك الجلوسن 


0 


الفا الك هة اة الاك الاين 


بعد قيامك بإجراء التصميم كما بالشكل السابق قم بتغيير ال Ac)‏ 
الخاص بالصفحة إلى Show num.asp‏ وكذلك اسم مربع النص إلى 
Keyword‏ وإليك کود التصميم علی النحو التالى 1 


<form method="POST" action="show_num.asp'"> 
<div align="center'"> 
<center> 
<table border="1" cellpadding='"0" cellspacing="0" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="560" id=" Auto0Number6" 
height='"72'""> 
<tr> 
<td bgcolor="#2179B8" width="559" height="24">&nbsp;</td> 
<tr> <tr> 
<td width="558" height='"26'"> 
<p align="center'"><b><font color='""#000066'">&nbsp; JÉدا‎ 


<ط/> <۸ >/٥‏ الاسم الرباعی 


<input type="text" name="keyword" size='""38'"'> 

<input type="submit" value='"" "عرض رقم لجس‎ nam e='"' B1'"'><>/td< 
</tr> <tr> 

<td bgcolor="#2179B8" width="559" height="22">&nbsp;</td> 
</tr> </table> </center> </div> </form> 


بعد قيامك بإنشاء الشكل السابق تكون قد انتهيت من تصميم الصفحة 
الأولى وللقيام بتصميم الصفحة الثانية قم بحفظ أحد الصفحات ذات القوائم 
الجانبية بالاسم مئه. ٣‏ uاط_0wطء‏ › ثم قم بإدراج جدول لعرض نتائج 
الح فو ضا بد انات ا ر ادب کنا اکل قال : 
اسم الطالب 


رقم الجلوس الخاص بك هو 


الصف المقيد به 


A8 


بناء المواقع ا[إلكت ونية ذات الطابع الديناميكى 
وإليك كود تصميم الشكل السابق على النحو التالى : 


<center> 
<table border="1"' cellpadding="0" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="492" dir="rtl" 
id=" AutoNumber6" height='"118''> 
<tr> 
<td width="160" height="39'" bgcolor="#A3C4E6'"><font 
color="#000066''> 
>b<>& nbsp; الطاب‎ مسا>/b<>N/‎ on t< </td> 
<td width="330" height="39" bgcolor="#DFECES8" 
align="center'"'></td> 
</tr> <tr> 
<td width="160" height="39" bgcolor="#A3C4E6'"><font 
color="#000066''> 
رقم الجلوس الخاص بك هو :مط &<ط>‎ >/(<>/ 0 n< >/) d< 
<td width="330" height="39" bgcolor="#DFECES8" 
align="center'"'></td> 
<tr> <tr> 
<td width="160" height="40'" bgcolor="#A3C4E6'"><font 
color="#000066''> 
>bط<&‎ 1p: /><ط/> الصف المقید به‎ n< >/t d< 
<td width="330" height="40" bgcolor="#DFECES8" 
align="center'"'></td> 
<tr> </table> </center> 


بعد قيامك بإنشاء الجدول السابق قم بالاتجاه إلى وضع H۲۷1‏ لكى 
يتم كتابة كود ۸8۴ و يمكنك ملاحظة أننا نرغب فى تحديد البيانات من 
الجدولين (12٠ء٠۲,‏ 1٤u1ءمع)‏ أى أننا سنقوم بكتابة جملتين ٥٥1م$‏ وذلك؛ 
لأن صفحة البحث عن أرقام جلوس الطلاب ستكون لجميع الصفوف وسوف 
نقوم بكتابة جمل 1٥٥1ع$‏ على النحو التالى : 
 keyword=request.form("keyword")%>‏ %< 


<% 
selectresult1sql="select * from result1 where name= '"&keyword&'""" " 


set rsresult1=conn.execute(selectresult1sq1)Yo> 
<% 

selectresult2sq1="select * from result2 where name= '"&keyword&'""" " 
set rsresult2=conn.execute(selectresult2sq1)Yo> 


۷ 


EA AN‏ اا 

شرح الكود : 

فى الكود السابق قمنا بالإعلام عن أن هناك متغير اسمه Keyword‏ 
يجب أخذ قيمته وبعد ذلك قمنا بكتابة جمل †ء[م$ لكى يتم مطابقة القيمة 
التى تم أخذها من المتغير مع القيمة التى تتساوى معها فى الحقل مصNNa‏ 
ولاحظ معی اننا قد قمنا بکتابة " ''& 0۲۵ wرع)k&"'‏ =" هد أی آنه سیتم 
البحث ب ( = ) » ويمكنك تحديد حقل آخر لكى يتم البحث بداخله عن قيمة 
المتغيرلإه سرع أى تصبح عملية البحث فى حقلين . فعلى سبيل المتال 
يمكنك إدخال الحقل fه؟‏ وذلك عن طريق استكمال جملة 1م58 على 
النحو التالى : 

ولقد قمت باختيار الحقل ه6 للتوضيح فقط ولكن منطقيا فى هذا 
المشروع لا يصلح أن يتم اعطاء الطالب صلاحية البحث بالحقل fه؟‏ ؛ لأن 
ذلك يعطى فرصة للطالب فى القيام بالإطلاع على كافة أرقام جلوس 
الموجودة بقاعدة البيانات وستلاحظ أيضا أننا فى هذا المثال قمنا باستخدام 
( = ) ولم يتم استخدام )ز1 وذلك أيضا لنفسس السبب السابق ذكره حيث 
إنه إذا تم استخدام )11 سيتم إظهار كافة النتائج التى تتعلق بالقيمة التى تم 
إدخالها. 

هذا ويمكنك ملاحظة آنه قد تم استخدام المتغیر (1٤۹۷1٥إ؛])‏ فى كود 
Sect‏ الخاص بالجدول الأول والمتغير (u[2ءعإءإ)‏ بكود Select‏ 
الخاص بالجدول الثانى وذلك بدلا من استخدام المتغير )]s(‏ كما هو معتاد 
فى المراحل السابقة وقد قمنا بعمل ذلك ؛ لأننافى هذه الحالة نرغب فى 
إجراء عملية البحث فى جدولين فمن المنطقى أن يكون لدينا متغيرين 
ليختص كل متغير بالقيام بعملية واحدة من العمليتين . 


۸ 


با الهو افع آل الك وة دات الطاب الذينافيكى 


بعد قيامك بكتابة جمل †ءع[م$ كما بالكود السابق فالآن سوف نقوم 
بكتابة أمر عرض نتائج البحث الخاصة بالجدول 1٤[uوءم]‏ وذلك بجدول 
فوك الات عل ا اكا 


<% do while not rsresult1.eof Y%o> 
<center> 
<table border="1" cellpadding="0" cellspacing="0" style="border- 
collapse: collapse" bordercolor="#FFFFFF" width="492" dir="rtl" 
id=" AutoNumber6'" height='"118'"> 
<tr> 
<td width="160" height="39" bgcolor="#A3C4E6'"><font 
color="#000066''> 
<>b<>&nbspص;پڻاطلا‎ مسا>/b<>N/‎ fon t> </td> 
<td width='"330" height='"39" bgcolor="#DFECES8" 
align="center"><%=rsresult1("name")% ></td> 
</tr> <tr> 
<td width="160" height="39" bgcolor="#A3C4E6'"><font 
color="#000066''> 


0n < >/d<‏ /><ط/> رقم الجلوس الخاص بك هو :م1 &<ط> 
<td width="330" height="39" bgcolor="#DFECES"‏ 
align="center'"><%=rsresult1("num")% ></td>‏ 
</tr> <tr>‏ 


<td width="160" height="40" bgcolor="#A3C4E6'"><font 
color="#000066''"> 
>bط<&‎ nbsp: الصف المقید به‎ >/(<>/ 10n t< >/ {d< 
<td width="330" height='"40" bgcolor="#DFECES8" 
align="center'"><%=rsresult1('saf'")% ></td> 
</tr> </table> </center> 
<% 
rsresult1.movenext 
loop 
< 


کے کا 
رشن يانات مده و لکن ف ةا لمال فة هتا اكاد اتير 
(u11وهاا)‏ والذى قمنا باستخدامه أثناء كتابة جملة {٥م]مS‏ الخاصة 
بالجدول 11و8 ويمكنك أيضا ملاحظة استخدام الحلقة 50 لعرض 
بيانات الجدول وذلك أيضا باستخدام المتغير ( 1٤[u؟ءاءإ)‏ . 


۲4 


ا لقاع الك وة داك الظاة الذنايخص 
بعد قيامك بالانتهاء من كتابة أمر عرض بيانات الجدول 1٤اںuوم]‏ قم 

بنسخ نفس الكود السابق ثم قم بلصقه مرة أخرى بعد جدول عرض بيانات 
الجدول 11 ومع تم قم بتغيير المتغير إلى ( 12اوهإء] ) ولاحظ أن أكود 
جداول عرض البيانات ستكون متتالية أى أنه سيكون داخل الصفحة جدولين 

اسم الطالب 

رقم الجلوس الخاص بك هو 

الصف المقيد به 

ا 1 

رقم الجلوس الخاص بك هو 


الصف المقيد به 


ملحوظة : 

عند إجراء عملية البحث سيظهر الجدول الذى يوجد به نتائج للبحث 
فقط أى أنه لايظهر الجدولين معاً . 

بعد الانتهاء من الخطوات السابقة قم بإغلاق الاتصال بقاعدة البيانات 
وذلك عن طريق كتابة الكود التالى : 


<% 


conn.close 


set conn=nothing 
>< 


الطلاب ويمكنك ملاحظة نقاتح البحت عتد إجراء عملية البحت باسم طالب 
مقيد بالجدول الأول على النحو التالى : 


۰ 


بنا الفواقع آ[الكم وة دات الظان الدينامیكی 


: عند إجراء عملية البحث‎ )١ 


اخل اإسم الرياعي [أحمد فهمى عد لمم عبرا 


)١‏ عند الضغط على زر ( عرض رقم الجلوس ) ستظهر نتائج 


ابت على التدر اتال ٠‏ 
اسم الطالب أحمد همي عبد المنعم عبيرة 
رم الجلوس الخاص بك شر 4 

الصف المقيد به 1 


ولاحظ أيضا عند إجراء عملية البحث باسم طالب مقيد بالجدول الثانى 


طهر التبخة كما على التحر آقال ٠:‏ 


اسم الطالب E‏ محمود محمد 
رم الجلوس الخاص بك هو 1 

الصف المقط به 0 
صفحات عرض نتائج الطلاب : 


فى هذه المرحلة سوف نقوم بتصميم صفحتين الصفحة الأولى خاصة 


بالاستعلام عن النتيجة وذلك عن طريق اختيار الصف وإدخال رقم الجلوس 
وسوف يتم تسميتها بالاسم مءه.1٤اuو٥]_طء۲همء‏ والصفحة الثانية خاصة 
بعرض نتائج الطلاب وسوف يتم تسميتها بالاسم میه. [٤1‏ uء٥]_0Wطء‏ وسوف 
نبداً بتصميم الصفحة الأولى وذلك عن طريق حفظ أحد الصفحات ذات القوائم 
الجانبية بالاسم موه.1٤[اuوم]_طءإجعء‏ ثم القيام بتصميم الشكل التالى : 


۲۳۳١ 


افوا الك هة ذاة الطاة الاين 


ئر الصف _[7] ادف رذم الچلرس || عالت 


فى الشكل السابق يلاحظ أننا قمنا بإدراج Drop-down box‏ 
(قاتفة منسدلة لك يقم سن خلالها اخثيار الضف وكذلك تم إدراج 
×0ط 1٥×‏ (مربع نص) لكى يتم إدخال رقم الجلوس به . 

ا ای ف اکر کا ن 
Drop-down box‏ ( قائمة منسدلة ) كما بالشكل التالى : 


Drop Down Box Froperties 


Mame: | 


haice Selected | Yaue | Add... 
الصف الأول‎ Modify... 


الصف الثاني 
a 3 Remûye |‏ الصف الثالث 
1 
يلا حظ من الشكل السابق أننا قد قمنا بادخال الصفوف الثلاثة وقد قمنا 
بكتابة القيمة (1) للصف الأول والقيمة (2) للصف الثانى والقيمة (3) 
للصف الثالث والقيمة (0) للخيار الأول ( اختر الصف ) وسوف نتعرف 
لاحقا على سبب كتابة هذه القيم . 


بعد الانتهاء من تغيير خصائص القائمة المنسدلة قم بتغيير اسم مربع 
النص إلی الاسم ٥۲۵‏ سرع تم قم بتغییر ال ١٥])ء۸‏ الخاص بالصفحة إلى 
الصفحة موه.1٤u1و٥إ_س0wطء‏ وإليك كود التصميم على النحو التالى : 


۲ 


اء الفة افع ال الك وة دات الطاب الدينافيكى 


<form method="POST" action="show_result1.asp'"'> 
<div align="center'"> 
<center> 
<table border="1" cellpadding="0" cellspacing="0" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="560" id=" AutoNumber6" 
height='"72"'> 
<tr> 
<td bgcolor="#2179B8" width="559" height="24">&nbsp;</td> 
<tr> <tr> 
<td width="558" height='"26'""> 
<p align="center'"><b><font color="#000066'">&nbsp; 
<span lang='"ar-eg'">فصلا <«صومء/> اختر‎ 
<select size="1" name="D1"" style="color: #000066'"'> 
<option selected value='""0''> لصف‎ jiîخ|>/option>‎ 
<option value='"1'">Jgألl‎ éصJl</option>‎ 
<option value='"'2'">yأئlûلl />الصف‎ op tion< 
<option value='""'3'">كJlûلl />الصف‎ option < 
</select<<span lang="ar-eg">&nbsp;&nbsp; JÈدl</span>‎ 
<span lang='""ar-eg''>سولجلlا‎ paر</span>‎ </font><</b> 
<input type="text" name="keyword"" size='""'22''> 
<input type="submit" value=" rجıîiلl "عرض‎ name="B1'"'<>>/)d< 
<ltr> <tr> 
<td bgcolor="#2179B8" width="559" height="22">&nbsp;</td> 
<ltr> 
</table> 
</center> </div> </form> 


بعد الانتهاء من تصميم الشكل السابق نكون قد انتهينا من تصميم 
الصفحة الأولى والخاصة بالإستعلام عن النتيجة وسوف نقوم الآن بتصميم 
الفح اة و الخاضة برضن اناج ولام تيمب هذةالكفحة ق 
بحفظ أحد الصفحات ذات القوائم الجانبية بالاسم pیھ.1٤اuو6]_‏ 0wطS‏ ثم 
قم بإدراج جداول لعرض بيانات ونتائج الطلاب وذلك كما بالشكل التالى : 


Ahi 


ف اغراف الك هة ذاة الاك الاين 


اسم الطالب 


ا a Ê‏ ن 
ملحوظة ++ هذه النتيجة معتمدة من إدارة المدرسة 


درجات المواد الدراسية 


د فراع الل ل ر ك اكات ار ا كنا اكل اى 
بالإعلام عن المتغيرات وكتابة كود ٤ءع[ع$‏ وذلك على النحو التالى : 


<!--#include file="conn.asp'" --> 
<% 
keyword=request.Form("'keyword") 
fclass=Request.Form("D1") 
if fclass=0 then 
response.write "<b><font color=#FF0000><center> jù من فضلك اختر الصف‎ 


>/fon<>/b<"‏ القائمن 
else‏ 
set rs=conn.execute("'select * from result1 where num='" &keyword&'""‏ 
and saf='"&fclass&'"" ")‏ 
if not rs.eof then %>‏ 


التعلق عل اتلكوة: 

کے ا الا ف اك عا ك اتال اة الات د دك 
قمنا بالإعلام عن المتغيرات الموجودة لدينا حيث قمنا بالإعلام عن المتغير 
Keyword‏ وكذلك المتغير ووهآء۴ والخاص بالنموذج 51 وهو النموذج 
الى يوج به الضفرف الذانة ر تلك مرح نالكرد على النحو الالى: 


٤ 


بنا لواف ال الك وة اة الات الديافيكى 


<!--#include file="conn.asp'" --> 
<% 


keyword=request.Form("'keyword") 
fclass=Request.Form(" D1") 


بعد ذلك قمنا بكتابة جملة 1۴ لكى يتم إظهار العبارة ( من فضلك اختر 
الصف من القائمة ) وذلك عندما يتم اختيار الخيار ( اختر الصف) ويلاحظ 


if fclass=O0 then 


response.write "<b><font color=#FF0000><center> jù من فضلك اختر الصف‎ 
القائمن‎ >/ font >/b<" 


بعد ذلك قمنا بكتابة جملة ٤ءع[ع$‏ لكى يتم تحديد البيانات الموجودة 
بالجدول 1[اںوم‌R‏ عندما تتساوی مدخلات مربع النص (۲d٥wرع))‏ مع 
خد ان الو هرد الكل ( نة ) وهر الحقل الخاضن درف اللو 
وكذلك أيضا عندما تتساوى القيمة المختارة من (sوهاء؟)‏ ( خيارات القائمة 
المنسدلة ) مع أحد القيم الموجودة بالحقل ( fهء)‏ ولعلك فهمت عزيزى 
قائ لماذا تم كتابة القع ( 1,2,3 لخبارات القائمة حبك تم كقابة هذه. الق 
لكى يتم معرفة الصف الذى ينتمى إليه رقم الجلوس الذى تم إدخاله عن 
طريق مربع النص (لإهسرم)]) وذلك يتيح إمكانية تكرار أرقام الجلوس 
بالصفوف الثلاثة دون وجود خلل أو تداخل فى البيانات وذلك موضح بالكود 
على النحو التالى : 

else 


set rs=conn.execute("'select * from result1 where num='" &keyword&'"" 
and saf='"&fclass&'"" ") 


وأخيرآً قمنا بإخباره أنه عندما يتم الوصول إلى نهاية الملف أى عندما 
يتم البحث فى جميع سجلات الملف سيتم إظهار بيانات الحقول التى سوف 
يتم إستدعائها داخل الصفحة وذلك موضح بالكود على النحو التالى : 


if not rs.eof then %o> 


0 


بناء المواقع الالكت وة ذات الطابع الدينافيكى 

بعد كتابة الكود السابق قم بكتابة اسماء الحقول التى ترغب فى 
اشكعاء محتو تما ذاخل كادا الجدا رل و إلك كرد تضصفح الجذارل ضهنا 
ل0 غ 


</p> 
<div align="center"> 
<center> 
<table border="1"' cellpadding="0" cellspacing="0" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="492" dir="rt]" 
id=" AutoNumber6" height='"95'"> 
<tr> 
<td width="490" height="31" bgcolor="#2179B8" colspan="2'""> 
<p align="center'""'><b><font size='"4" 
color="#FFFFFF">&nbsp; لبنت‎ 
للطالب‎ تیساسألا>/f0nt<>/ط<>/td<‎ 
</tr> <tr> 
<td width="160" height="31" bgcolor="#A3C4E6'""> 
&<ط>‎ 1p: />اسم الطالب‎ (< >/ t< 
<td width="330" height="31" bgcolor="#DFECES8" 
color="#000066" align="center"><%=rs("name")%></td> 
</tr> <tr> 
<td width="160" height="32" bgcolor="#A3C4E6'""> 
>b<>& nbsp رقم الجلوس;‎ & nbsp; >/b<>/td< 
<td width="330" height="32" bgcolor="#DFECES8" 
color="#000066" align="center"><%=rs("num")%>&nbsp;</td> 
</tr> <tr> 
<td width="160" height="32" bgcolor="#A3C4E6'""> 
<b>&nbsمص;:;فصلا‎ >/b<>/)d< 
<td width="330" height="32" bgcolor="#DFECES8" 
color="#000066" align="center'"><%=rs("saf'"')%o></td> 
</tr> </table> </center> 
</b></font> 
</div> 
<p dir="'rtl" style="text-indent: 19px; line-height: 200% ;" 
align="center''> 
<font color="#FF0000'"" size='""4'"'><b> ملحوظ. سات ااه هذه النتيجى معتمدة‎ 
من إدارة‎ 
Fwرs“kl</b></font<</p>‎ 
<div align="center'"> 
<center> 
<table border='"1" cellpadding="0" cellspacing="0"" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="500" id=" AutoNumber7" 
height="192'"'> 
<tr> 


A 


اء الفة افع آل الك وة دات الطاب الديتافيكى 


<td bgcolor="#2179B8" height="30" width="500" align="center" 
colspan='""2'"'> 
<font size="4" color="#FFFFFF'"><b> alk درجات‎ 
Mیساردلا>/<>/‎ fon t< >/ {d< 
</tr> <tr> 
<td height="30" width="250" bgcolor="#A3C4E6'"><b> 
<font style="font-size: 13pt'"'>&nbsp;vaڊرs‎ Fil</font><</b></td> 
<td height="30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066'""><center><%=rs("'ara")%o></td> 
</tr> <tr> 
<td height="30'" width="250" bgcolor="#A3C4E6'"><b> 
<font style="font-size: 13pt">&nbsp;ilضlyر</font<</b></td>‎ 
<td height='"30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066'""><center><%=rs('math")%o></td> 
</tr> <tr> 
<td height="30" width="250" bgcolor="#A3C4E6'"><b> 
<font style="font-size: 13pt'"'>&nbspص;éFيڀjılجنإ|‎ ril</font><</b></td> 
<td height="30" width="250" bgcolor="#DFECES8'"><font 
color="#000066'"'><center><%=rs("eng")%></td> 
</tr> <tr> 
<td height="30" width="250" bgcolor="#A3C4E6'"'> 
<span style="font-size: 13pt'"'><b>&n bsp; rييرتلا‎ 
rینیدلا>/(<>/spمan<>/td<‎ 
<td height='"30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066'""><center><%=rs("deen")%o></td> 
</tr> <tr> 
<td height="30'" width="250" bgcolor="#A3C4E6'"'> 
<font style="font-size: 13pt'"><b>& nbsp; bli ( 
1)</b></font></td> 
<td height="30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066'"><center><%=rs('act1")% ></td> 
</tr> <tr> 
<td height="30" width="250" bgcolor="#A3C4E6'"'> 
<font style="font-size: 13pt'"><b>& nbsp; bli ( 
2 )</b></font></td> 
<td height='"30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066'"><center><%=rs('act2")% ></td> 
</tr> <tr> 
<td height="31" width="250" bgcolor="#A3C4E6'"'> 
<span style="font-size: 13pt'">>b>yلكڪا )جوع‎ </b> </span> </td> 
<td height="31" width="250" bgcolor="#DFECES8'"><font 
color="#000066'""><center><%=rs("'tot'")%o></td> 
</tr> 
</table> 
</center> 


۷ 


اا افوا الك وة اف الاح اتددافيكی 
BO LE E E A E Ea‏ 
بعد الكود الخاص بالجداول على النحو التالى : 


do while not rs.eof 


< 


%< 
rs.movenext‏ 
loop‏ 
ويلاحظ أننا قد قمنا بكتابة الحلقة 00 بعد الكود الخاص بالجدول وذلك 
لأنه فى مثالنا هذا لايوجد أكثر من نتيجة بحت للرقم الذى تم إدخاله وإنما 
يوجد نتيجه واحدة فقط أى سيتم عرض بيانات سجل واحد فقط وذلك على 
عكس المثال الخاص بالبحث برقم الجلوس والذى قمنا بكتابة الكود الخاص 
بعد القيام بكتابة الحلقة 50 سيتم كتابة جملة لكى تظهر عندما لا يوجد 
نتائج للبحث أى عندما يتم البحث داخل الملف ولم يتم العثور على أى نتيجة 
تتساوى مع القيمة التى تم إدخالها عن طريق مربع النص وأيضاً سيتم إنهاء 
عمل و8 وإغلاق الاتصال وذلك على النحو التالى : 


<%o else %o> </font> 
<p align="center'"'><þ><font face="Simplified Arabic"" size="3" 
cہا٥۲='#۴۴0000''< من فضلك‎ 
من ڪتابن رقم الجلوس بشڪل صحيح‎ د>İö</font><font‎ face="Simplified 
Arabic" size="3" color="#000080''> </font></b></p> 
<% endif %> 


<%ors.close 
set rs=nothing 
conn.close 
set conn=nothing 
end if 
00< 


وبعد كتابة الأكواد السابقة يمكنك تجربة الصفحات وكتابة رقم جلوس 
أحد الطلاب حيث ستجد الصفحات كما بالأشكال التالية ٠‏ 


۸ 


بنا الفواقع آل الك وة دات الظاع الديناموكی 


اختر الف الصف الثالف کا ادخل رقم الجلوس "٤|‏ | عرض النئيجة | 


البيانات الأساسية للاطالي 


اسم الطالب احمد همي عبدد المنعم سير 
رقم الجلوس té‏ 
الصف ۹ 


ملحوظة ** هذه النتيجة معتمدة من إدارة المدرسة 


درجات المواد الدراسية 


لا عربية 

ریاضیات Y‏ 
لغة إنجليرية r‏ 
التربية الدينية r‏ 
شاط( r ) ١‏ 
شاط( ۲) 
المجموع الكلى 0 


عزيزى القارئ لعلك د تتذكر الصفحة الخاصة بطباعة البيانات والتى قد 
تم إنشائها مسبقا حيث كانت هذه الصفحة خاصة بطباعة بيانات السجل 
الموجود بجانبه كلمة (طباعة) فيمكنك استغلال هذه الصفحة فى هذه المرحلة 
لكى يتمكن الطالب من طباعة نتيجته وذلك عن طريق كتابة كلمة طباعة ثم 
ربطها بالرابط التالى : 


ولكن يجب كتابة هذا الرابط قبل كتابة الحلقة 0 وسوف يظهر الكود 
الخاضة بالطاع فى دال اة كما باتكل اال : 


div 
¢ dir="rtl" style="text-indent: 19px; line-height! 200%:" align="center"> 
span style="font-wei ght: 700; backgrouwd-color: #FFFFFF" lang="ar-eg"* 
ting src="inagea/print. gif" width="81" height="81"4br® 
sHbap ;enbap ;enbap ;enbap; 
<font color="#00N0B0" face="Tahona"* 
«a href="print_student. asp?id=t$=rs ("ID") $2"? 
«font color="#0000ê0" size="2"» Jlaتن|‎ 
de lhl Kont? at font spametfont color="#OOOOSO"> 


do while not ra,eof 
ج‎ 


4 

L3. IOVENEXT 
loop 

$ 


۲۴۹ 


فا الخرافع ازاك وة ذا الظات الدافيك 
الفح أغاء فرك دة الطاب كا اشكل الاد : 


الييائات الأساسية للطالب 


اسم الطالب أحمد فهمي حيدد المتعم عميرة 
رقم الجلوس té‏ 
الصف ا 


ملحوظة ** هذه النتيجة معتمدة من إدارة المدرسة 


درجات المواد الدر اسية 


تة عربية 0 
ریاضیات ۲ 
لغة إنجليزية 0 
اثتربية الدينية Tt‏ 
نشاط ( ١‏ ) 4 
نشاط ( r ) ١‏ 
المجموع الكلى ا 

9 

رلک 


إنتغال للطباصة 
وعند الضغط على الرابط تم عرض البيانات داخل صفحة الطباعة 
E AEG‏ 


البيانات الأساسية للطائب 


اسم الطالب احمد فيمى عبدد الملعم عميرة 
الفرةة ۳ 
رقم الجلوس ٤‏ 
درجات المواد الدراسية 
الغا العربية 2 
الرياضيات ۲ 
الغا الإنجليزية t۳‏ 
التربية الديئية 1۳ 
شاط ( 1) ۳ 
نشاط ( ۲) 1 


المجموع الكلى ۳ 


ناء لفو افع آل الك وة دات الطان الذيتافيكى 


وبعد عمل الخطوات السابقة نكون قد انتهينا من تصميم صفحة عرض 
نتائج طلاب الصفوف (الأول والثانى والثالث) ولا يتبقى لنا الآن سوى 
كح الا فرك د و اقفو ار وال اه 
الفحات مه مااع فن الخظوات انحا ست شه د ص 
الصفحة الأولى خاصة بالإستعلام عن النتيجة وسوف نقوم بتسميتها بالاسم 
م۳ ch_resuءarمء‏ والصفحة الثانية خاصة بعرض النتائج وسوف نقوم 
بتسمیتها بالاسم میه.11)2٥]_W٥طء‏ وحتی لاندخل فى دائرة تكرار الشرح 
فسوف نقوم بإضافة بعض التغيرات البسيطة والتى يمكنك ملاحظتها فى أكواد 
لفكت الخافة لدت و الك كرد تم فة اكاك فن اة 
t{2.pاresu_ search‏ وذلك على النحو التالى : 


<form method="POST" action="show_result2.asp'"'> 
<div align="center'""> 
<center> 
<table border="1" cellpadding="0'" cellspacing="0" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="560" id=" AutoNumber6" 
height='""72'"'> 
<tr> 
<td bgcolor="#2179B8" width="559" height="24">&nbsp;</td> 
<tr> <tr> 
<td width="558" height='"26'""> 
<p align="center'"><b><font color="#000066'">&nbsp; 
<span lan g='""ar-eg'"><فصلا <«ومء/> اختر‎ 
<select size="1" name="D1"' style="color: #000066'"'> 
<option selected value='"0''"'> لصف‎ jiخ|>/option>‎ 
<option value='"4'"">gيlرأll‎ ةصل</option>‎ 
<option value='"'5'"'>سمlخلl />الصف‎ op tio n< 
</select><span lang="ar-eg">&nbsp;&nbsp; JÈدI</span>‎ 
<span lang="ar-eg''>سgلجلا‎ paر</span>‎ </font><</b> 
<input type="text" name="keyword"" size='""'22'"'> 
<input type="submit" value=" rجıîiiلl "عرض‎ name="B1'"'<>>/)d< 
<lItr> <tr> 
<td bgcolor="#2179B8" width="559" height="22">&nbsp;</td> 
<ltr> </table> </center> 
</div> </form> 


وإليك أيضا أكواد الصفحة pوه.1)2ا١ء٠إ_wسهطء‏ والخاصة بعرض 
ادت کک الت اا : 


۲٤١ 


انافك 


<!--#include file="conn.asp'"" --> 
<% 
keyword=request.Form("'keyword") 
fclass=Request.Form(" D1") 
if fclass=O0 then 
response.write "<b><font color=#FF0000><cen{er> jùم من فضلك اختر الصف‎ 
القائمت‎ >/ n >/b<" 
else 
set rs=conn.execute("'select * from result2 where 
num='" &keyword&'""' and saf='"&fclass&'""" '") 
if not rs.eof then %o> 
</p> 
<div align="center'"> <center> 
<table border="1" cellpadding="0" cellspacing="0"" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="492" dir="rt]" 
id=" AutoNumber6" height='""95'"> 
<tr> 
<td width="490" height="31" bgcolor="#2179B8" colspan='"2'""> 
<p align="center'"><b><font size="4" 
color="#FFFFFF">&nbsp; لبنت‎ 
للطالب‎ تیساسألا>/f0n1<>/ط<>/td<‎ 
</tr> <tr> 
<td width="160" height="31" bgcolor="#A3C4E6'""> 
>bط<&‎ np: /><ط/>اسم الطالب‎ t< 
<td width="330" height="31" bgcolor="#DFECES8" 
color="#000066" align="center"><%=rs("'name")%></td> 
</tr> <tr> 
<td width="160" height="32" bgcolor="#A3C4E6'""> 
>b<>& nbsp رقم الجلوس;‎ & nbsp; >/b<>/td< 
<td width="330" height="32" bgcolor="#DFECES8" 
color="#000066'" align="center'"><%=frs("num")Y%o>&nbsp;</td> 
<tr> 
<td width="160" height="32" bgcolor="#A3C4E6'"> 
<b>&nbsص; الصف‎ >/<>>/td<> 
<td width="330" height="32" bgcolor="#DFECES8" 
color="#000066" align="center'"><%=rs("'saf'")%o></td> 
<tr> </table> </center> 
</b></font> 
</div> 
<p dir="'rtl" style="text-indent: 19px; line-height: 200% ;" 
align="center''> 
<font color="#FF0000'"" size='""'4'"'><b> ملحوظ. اهاه هذه النتيجى معتمدة‎ 
من إدارة‎ 
Fwرskl</b></font<</p>‎ 
<div align="center'"> 
<center> 


4 


بنا الفو افع الك وة دات الطاب الدينافيكى 


<table border="1" cellpadding="0" cellspacing="0"" style=" border- 
collapse: collapse" bordercolor="#FFFFFF" width="500" id=" AutoNumber7" 
height="192''> 
<tr> 
<td bgcolor="#2179B8" height="30" width="500" align="center" 
colspan='"2'"'> 
<font size="4" color="#FFFFFF'"><b> aاkl درجاٽ‎ 
Mیساردلا>/<>/‎ fon t< >/ {d< 
</tr> <tr> 
<td height="30'" width="250" bgcolor="#A3C4E6'"><b> 
<font style="font-size: 13pt'"'>&nbsp;évaڊرa‎ Fil</font<</b></td> 
<td height="30" width="250" bgcolor="#DFECES8'"><font 
color="#000066'"'><center><%o=rs("'ara")%o></td> 
</tr> <tr> 
<td height="30'" width="250" bgcolor="#A3C4E6'"><b> 
<font style="font-size: 13pt">&nbsp;iilضlyر</font<</b></td>‎ 
<td height="30'" width='"250" bgcolor="#DFECES8'"><font 
color="#000066'"><center><%=rs('math'")%o ></td> 
</tr> <tr> 
<td height="30" width="250" bgcolor="#A3C4E6'"><b> 
<font style="font-size: 13pt'"'>&nbspص;éFيjılجنإ|‎ ril</font><</b></td> 
<td height='"30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066'"><center><%=rs("'eng")%></td> 
</tr> <tr> 
<td height="30" width="250" bgcolor="#A3C4E6'"'> 
<span style="font-size: 13pt'"><b>&nbsp; ٽlwlرد‎ 
rيعامتجا>/b<>/span<>/)d<‎ 
<td height="30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066'""><center><%=rs("'stu")% ></td> 
</tr> <tr> 
<td height="30" width="250'" bgcolor="#A3C4E6'"'> 
<span style="font-size: 13pt"><b>&nbsp;pgle</b></span></td> 
<td height="30" width="250" bgcolor="#DFECES8'"><font 
color="#000066'""><center><%=rs(""olom'")%></td> 
</tr> <tr> 
<td height="30" width="250" bgcolor="#A3C4E6'"'> 
<span style="font-size: 13pt'"'><b>& nbsp; لري‎ 
rینیدلا>/(<>/spمan<>/td<‎ 
<td height="30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066''><center><%o=rs('deen")% ></td> 
</tr> <tr> 
<td height="30" width="250" bgcolor="#A3C4E6'"'> 
<font style="font-size: 13pt'"><b>& nbsp; bli ( 
1)</b></font></td> 
<td height="30'" width="250" bgcolor="#DFECES8'"><font 
color="#000066'"'><center><%o=rs('act1")%o></td> 
</tr> <tr> 


4 


ا الاکن 


<td height="30" width="250" bgcolor="#A3C4E6'""> 
<font style="font-size: 13pt'"><b>&nbsp; bli ( 
2 )</b></font></td> 
<td height="30" width="250" bgcolor="#DFECES8'"><font 
color="#000066'"'><center><%o=rs('act2")%o></td> 
</tr> <tr> 
<td height="31" width="250" bgcolor="#A3C4E6'""> 
<span style="font-size: 13pt'">>b>yلكڪا جوع‎ </b> </span> </td> 
<td height="31" width="250" bgcolor="#DFECES8'"><font 
color="#000066''><center><%o=rs("tot'")%o></td> 
</tr> </table> </center> 
</div> 
<p dir="'rtl" style="text-indent: 19px; line-height: 200% ;" 
align="center'"'> 
<% 


do while not rs.eof 


< 
<% 
rs.movenext 
loop 
< 
<% else %< 
<p align="center'"'><þ><font face="Simplified Arabic" size="3" 
cہا٥۲='#٭۴۴0000'< من فضلك‎ 
من ڪتابن رقم الجلوس بشڪل صحيح‎ د>İö</font><font‎ face="Simplified 
Arabic" size="3"" color="#000080'""> </font<</b></p> 
<% end if %> 
<%ors.close 
set rs=nothing 
conn.close 
set conn=nothing 
end if 
>< 


E E ES‏ ا 
ونتائج الصفين .الرابع والخامس وذلك عن طريق ربط كلمة (طباعة) 
بالرابط التالى : 


print2_student.asp ?id=<%=rs("ID'")%o> 


وبهذا نكون قد انتهينا من تصميم صفحات البحث الخاصة بالطلاب. 


٤٤ 


النصل الماشر 
حجزاستضافة مجانية 
ونقل اللفات عن طریق برنامج ۴۲۲ 


ا ااك فة 6 ف اة اتناك 


١‏ حصافة مجان ونا الله ات 
مل طريى برنامےج F۴۲۲‏ 
أولا : صعنىی خادم الويب [ الاستضافة ] : 
طبقا لتعريف الإنترنت فإن مواقع الإنترنت ما هي الا اسم نطاق 
المطلوب وهذا الموقع يحتوي على صور وكتابات ومواد هي الأخرى 
بدورها ينبغي أن تكون على خادوم (خادم) وهنا يتضح معنى استضافة 
ومحتويات موقع معين ويربط النطاق الخاص بهذا الموقع بعنوان الأي بي 
الخاص بالخادوم ويمكن تقسيم أنواع الاستضافة إلى استضافة مجانية 
وأخرى مدفوعة أى بمقابل مادى › وتتجه بعض الشركات إلى تقديم خدمة 
الاستضافة المجانية في مقابل الحصول على خدمات خاصة مثل الإعلان 
على المواقع المستضافة لديها وفى هذا الفصل سوف يتم شرح طريقة حجز 
استضافة مجانية على موقع أحد الشركات التى تمنح هذه الخدمة . 
ثانيا : حجز الاستضافة الصجانية : 
يوجد العديد من الشركات التى تمنح خدمة الاستضافة المجانية وفى 
مشروعنا هذا لا يمكن حجز استضافة عند أى شركة حيث لابد أن تكون 
الاستضافة تعمل على نظام وس0لمW1‏ لأن مشروعناتم برمجته بلغة 
۸P‏ ولغة ۸8۴ لا تعمل إلا علی نظام 0s‏ لم۷ ولابد أن تکون 
الاستضافة داعمة لاستخدام قواعد بيانات ووعع۸ ويوجد العديد من 
الشركات التى يمكنك حجز استضافة مجانية لديها من خلال موقعها على 


٤٦ 


بنا الفواقع آل الك وه ة دات الظاع الديناميكی 


الإنترنت وإليك بعض مواقع الشركات التى يمكنك من خلالها حجز 

استضافة تدعم ۶P‏ وذلك علی النحو التالی : 
http://www.webng.com‏ 
http://www.somee.com‏ 

http://www.domaindlx.com 


http:/www.brinkster.com/FreePkgLanding.aspx 


ويمكنك البحث عن طريق الإنترنت على شركات استضافة أخرى 
مجانية وفى مثالنا هذا سنقوم بحجز استضافتنا المجانية من خلال موقع 
صco. web‏ » فيمكنك حجز الاستضافة عن طريق الدخول على الموقع 
ثم الضغط على من عم1؟ من أعلى الصفحة الرئيسية الخاصة بالموقع 
فرت ت اتن ك إلى فة القحل ذف كا الكل افا : 


Please fill this form to sign up for your free site. 


Personal Information 


* : 
Full Name . 


* 
E-mail . 
Account Information 


* Mamber Narne : 
* Cannot contain spaces and will be included in your site address, 
* Passwol rd 


Retype Password 


* Enter Yefîfication Code : 


Yarîfication Code : 


Terms & Conditions 


I agree to the Temms & Conditions and accept the PHvacy Policy 


Sign Up | [ Gancel 


فى أعلى الصفحة الموجودة بالشكل السابق تجد أنه يطلب منك 
تسجيل اسمك بالكامل والبريد الإلكترونى الخاص بك ويمكنك كتابته كما 
بالشكل التالى : 


£۷ 


الوا الك هة ذاة الطاة الدافيكن 


Personal Infomation 


* Full Hame : ahmed tahmy emera 


* E-mail ahmed_tfahmyZ5Skûyahona .com 


الموقع ) الذى ترغب فى حجزه وسيطلب منك تعيين كلمة مرور وكتابة 
الرقم التأكيدى الذى يظهر داخل الصفحة وكذلك قراءة شروط الخدمة 
والموافقة عليها وذلك كما بالشكل التالى : 


* Member Hame ; EMENzZlawyschaol 


* Cannot contain spares and will be included in Your site address, 


" passuord ; esses | 
id a 
* Enter Yeffication Code ; [132253 


Yeafication Code : 


Terms & Conditions 


I agree to the Temns & Conditions and accept the PHwacy Policy 


بعد ملء البيانات السابقة بطريقة صحيحة قم بالضغط على زر 
up‏ ع1 للقيام بالتسجيل . 

بعد قيامك بكتابة البيانات السابقة دون أخطاء بها ستظهر لك رسالة 
تخبرك بأن عملية التسجيل قد تمت ولتنشيط حسابك سينبغى عليك الدخول 
إلى البريد الإلكترونى الذى قمت بكتابته أثناء التسجيل وهذه الرسالة تظهر 
لك كما بالشكل التالى : 


۸ 


x 


۲ 


بنا الفواقع آ[الكم وة دات الظا الدينامیكین 


Welcome and thank you for registering with WebNG! 


Please confirm your registration to active your account, To activate your 
account please check your e-mail and open the activation fink we sent you. 


Resend activation e-mail to ahmed fahmyZ238@yahoo.com 


اوق ا ا 2 ۵ غ ادرت اکر رک نکاس 
بك ستجد أنه قد تم إرسال رسالة تنشيط الحساب وسوف تجد الرسالة كما 
بالشكل التالى : 


To confirrn Your registration please click on the link below and fill the necessary information tn activate your account. 


Confirm Registration 
hip ep webng.comicontirm.aspxtidi=5044991 &yoni=elemenzlawyschool Epp atra= #ozioéztyhgwrhéaikzcl 545 


الل الان ا دراط يط الاك و وة ا ا 
وللقيام بتنشيط الحساب قم بالضغط على الرابط حيث سيتم الانتقال بك إلى 
اف لطاب متك اسم التطان وكلة المرور لذاكة الفسيل ذلك كتا باشل 
التالى ٠‏ 


Confirm Tour Registration 


* Please provide the following credentials to 
canfirm your registration 


|slemenzlawyschool 


.: Register New Account .: Forgot Password? 


ر اا اکر الحا ای ف کن ا لئے 


4۹ 


ف اغراف الك هة داك الاك الدرافين 


Welcome to WebNG! 


4 
0 E 
E Free Domain Phato Album 
Applications Hosting Gallery 
File Upload Member Profil ea) |] FEE 
1 Managemen: Tell a friend Statist 
Access your computer from anywhere 
Your computer vill follow you wherever you go. 
Your website is available ب‎ erever you haw: Internet connection, right? Yell, 5 E e utter. 
with LogMeIn a you 2 ur i 9 lac remo’ د را‎ nd E wherever, when - for 
free. And all you need is r ا‎ nection. Stay connected to all your files and applic a ns vith 
LogheIn Free, 


هة الرضرل ال لضفه الور 5 دال العا فان مك فل 
فاك لمر قم فن طريق النكر ل إلى الصفهة الخاصة برقع الملفات وهن 
Manger‏ ۴11 أو يمكنك استخدام برنامج ۴۲۴ لنقل الملفات والذى 
سنتناول شرحه بالتفصيل . 


ملحوظة : 
عند قيامك بتأكيد التسجيل من خلال الرابط المرسل على بريدك 
الإلكترونى فأحيانا تواجهك مشكلة عدم الاستجابة إلى طلبك وهذه المشكلة 
ثالثا : نقل الملفات عن طریق برنامج ۴۲۲۶ : 
٥‏ ماھو ۴۲۴P‏ ؛ 
۴۶ هو اختصار ل |oco†ەPr ۴11e Transfer‏ والتي تعنی 
بالعربية ميثاق نقل الملفات › المستخدم في نقل الملفات بين أجهزة الحاسوب 
سواء من حاسوب إلى حاسوب أو من حاسوب إلى خادوم. 
استتخدام برنامج ۴۲۲ : 
بعد قيامك بتحمیل إحدی نسخ برنامج ۳1۲ قم بفتح البرنامج لتجد 
ف انر تامج كما اگل الائ : 


10٠۰ 


بنا الفواقع آل الك وه ة دات الظايع الديدامیكی 


Ê FlashFXP 


Session Stes Options Queue Commands Tools Directory View Help 


ZAR TOETEC‏ فا 8 ل 


# | Û My Computer v1 FP | | 
Name & Tutal Size TatalFree | Name © Size Modified Attrib 

eee DR 

ê Ahmed Fahmy (D:] 27386 442GB 

4 DVD RAM Drive (E: 

Ê Shared Documents 

DON’ Documents 


2 Folders, Û Files, 2 Total 


ملحوظہ : 
عند القيام بفتح نافذة البرنامج ستجدها كما بالشكل السابق فلا تبالى 
من الفا الى نكما فر اة لبر تا واخدة قربا فى جح الس 
بعد قيامك بفتح البرنامج فإننا بحاجة إلی الدخول إلى حساب ٣۴۲۶۲‏ 
الخاص بموقعنا وفی بعض برامج ۴۲۴ ستجد شريطا فى أعلى البرنامج 
فى البرنامج الذى نقوم بشرحه الآن يختلف الأمر حيث سنقوم بالاتجاه إلى 
قائمة ور10ووم؟ واختيار ٤>عمnص€0 Quick‏ فسوف تجد نافذة يمكنك من 


Quick Connect 


General Toggles | SSL | Advanced| 


History: ¥ 


Server or Url: [ftp.webng. com} | Part 21 | 


lser Name: elmenzlanyschonl | LDldnanymous 


Password: | 


Bermaote Path: | 


ج 
Prouy Server: | etau]‏ 


| Connect Close 


۲۵1 


بناء المواقع الإلكتر ونية ذات الطابع الديناميكى 

فی الشکل السابق قمنا بکتابة اسم خادم ۳۴7۲ وغالبا يكون اسم الخادم 
باسم الموقع المستضيف وقد تم أيضا كتابة اسم المستخدم وكلمة المرور وفى 
مثالنا هذا اسم المستخدم هو نفس اسم النطاق ( الموقع ) الذى قمنا بحجزه . 

وبعد قيامك بالخطوات السابقة قم بالضغط على زر C٣0٣‏ 
وانتظر قليلاً ليتم الاتصال وعرض الملفات الموجودة بالموقع وعند 
الاستجابة لعملية الاتصال ستلاحظ أن واجهة البرنامج مقسمة إلى جزئين 
الجزء الأيمن يمتل ملفات الموقع و الجزء الأيسر يمتل ملفات جهازك 
ويمكنك نقل الملفات إلى موقعك عن طريق استعراض الملفات من جهازك › 
ثم اسحب الملف المراد نقله لتظهر الملفات داخل الجزء الخاص بالموقع كما 
بالشكل التالى : 


Ê FlashFXP CER 


Session Sikes Options Queue Commands Tools Directory View Help 


` 2 ها‎ AOE IEAE 


YF P ھا‎ D:MProject Book wv # BP 0 3 
Name Size Modified @ | |__ Name Size Modified Attrib ا‎ 

2 ebbtmbr .08و3‎ gif l4KE 24/072011 03:13 ص‎ 4t, Parent Directory 

(] ebblmbr3g08_1.gif DEB 24/07/2011 03.19 ص‎ Û data 0 18/11/2011 11:34 ga Qrrmreeret 

BÎ ebbimbr3g08_2. gi SEB 240/2011 03:13 ص‎ Î ad_stu.asp KB 181/2011 0ES awr 

Î edi ap IDKE 200/2011 D4:34 Î ad_stul asp 10KB 18/11/2011 DE55 w4 

@ edit_pall.asp TEE AAAI 02:17 ص‎ e add user.asp TEKE 182O OBS wee 

@ edil2. asp 1DKE 217102011 02:42 ص‎ f Admin_login ap 10KE 18/11/2011 OED awet 

3 filelist_TBgU.tnt TEB 207/2011 03:19 charıge_pass.asp BEB 18۸172011 OE:55* w~ 

8 header .pad 353KB 13/07/2011 05:24 ص‎ @ contirm_del.asp BKB 18/11/2011 OB: awa 

1# index him KE 20/082011 01:16 ص‎ @ conh.asp 138 18/11/2011 OBS * wet 

@ loginout.asp 3f D711⁄2011 07:39 ص‎ @ connection. asp 285 18/11/2011 OED wer 

mbesmbrdgl.css TEE AOTFA011 03:13 ص‎ |@ Contact_us.him BEB 18۸1172011 OB: aw 

| mbico_mb73g0_1 gi 1KB 24/07/2011 03.13 ص‎ 1 Contewt him 14KB 18/11/2011 DESE awar4 

S| mbico_mb7 g02. gi T1KE 2072011 03:13 ص‎ 3 control_panel.asp BKE 181/20 ORO w~ 

(BÛ mico mb73g0 3. gil TEB 24/07/2011 03.19 ص‎ Î delasp D0 18/11/2011 DESE awer 

8 mbiembr? 2a0. T4RE 2407/2011 03:19 ص‎ e del_comm. asp BEB 18۸1172011 OB:SB*F w~ 

@ mirıuê. asp 3KB 31/2003 03:48 ص‎ e deld.asp BD 18/122011 OE:BBF awa 

@ mines. ap 4KE D2 12011 08:49 ص‎ e delete.asp TEE 18/1/2011 OBB wet 

naliga.mdb 248 KE 1911/2011 02:04 ص‎ @ deleled.asp FEB 18/11/2011 CEBE wer 

e print_student.asp AEB 22A 3:20 ضھ‎ # edil.asp 10KE 1811/2011 DESE Wat 

@ print2_student. asp 4KB 22102011 05:03 ص‎ e edil_poallasp FEB 18/۸11/2011 DB: aw 

project book, barmp G33KE 240201 0306 ض‎ @ edild.asp 1UKBE 181/2011 OBS were ۰ 

1 Folder, 88 Files, 83 Total, 1 Selected (14 KB] 1 Folder, 42 Files, 43 Total, 1 Selected [7 KE] 


فبذلك الإجراء نكون قد انتهينا من نقل الملفات إلى الموقع بنجاح 
وستجد الموقع يعمل كما كان يعمل على الخادم المحلى الذى قمنا بتنصييه 
کے الها اوک انر اک م کیا الان ت ا ار ا 
الكتاب من خلال الرابط التالى : http://projectbook.webng.com‏ 
وبهذا نكون قد انتهينا من تصميم موقعنا فالآن ابدأ فأنت تستطيع . 


0۲ 


با الفة افع ال الك وة دات الطان الديتافيكى 


الرامع 


ر الكتب العرييم : 

- مهندس . اسماعیل دمران أبو زید » مشروع ۸8۲ . (د.ن › د.ت) 
- مهندس . حسام الدين حسن › كيفية تصميم موقع مجانى من البداية 

وحتى النهاية » .۲٠۰٠۷‏ (د.ن) 

المهندس / السيد المعداوى » ما يجب أن يتعلمه مطور مواقع الويب . 

- شروحات المهندس. عبدالله جابر شقليه المنشورة بمنتديات المحيط 
العربى . (د.ن › د.ت) 

- الأستاذ الدكتور / طلال ناظم الزهيري › دراسة تطبيقية 
لتحويل بيانات جداول [عء×8 إلى مكتبة رقمية باستخدام نظم 
(Winisis& Genisiscd)‏ )د.ü‏ < د.ت( 


رب المواقع الإلكترونية العربية : 
- مشروعات أعضاء منتديات المحيط العربى . 
http://www.arabmoheet.net‏ 
- موقع الفريق العربى للبرمجة . 
http ://www.arabteam2000-forum.com‏ 
- موقع كتب الحاسب العربية ( ص0ع.www.cb4a(‏ 
موقع ويكيبديا الموسوعة الحرة . 
http://ar.wikipedia.org/wiki‏ 
- منتديات مبرمجى لغات البرمجة . 


http://www.bramjnet.com 
- http://www.hotscripts.com 


- http:/www.w3schools.com/asp/default.asp 


Y0 


